vue全局前置,判断用户是否登录

拼搏现实的明天。 2023-06-19 06:58 14阅读 0赞

说白了就是路由拦截,点击一个路由,判断一下是否为登录状态,如果是登录状态跳转到首页或其他页面,如果不是登录状态就跳转到登录页面

思路就这么简单,接下来看看代码吧

index.js

//导航守卫
    // 使用router.beforeEach注册一个全局前置守卫,判断用户是否登录
    router.beforeEach((to, from, next) => {
    	if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
    		if (store.state.token) {
    			next();
    		} else {
    			next({
    				path: '/login',
    				query: {redirect: to.fullPath}
    			})
    		}
    	} else {
    		next();
    		}
    	})
    
    export default router

在路由自定义一个requireAuth,代码如下

const router = new Router({
    	mode: 'history',
    	routes: [
            {
    			//登录
    			path: '/login',
    			name: 'login',
    			component: () => import('@/views/member/login'),
    			meta: {
    				show: true,
    			}
    		},
            {	
    			//首页
    			path: '/',
    			name: '首页',
    			component: () => import('@/views/index'),
    		},
            {
    			//我的订单
    			path: '/new/order',
    			name: 'order',
    			component: () => import('@/views/new/order'),
    			meta: {
    				show: true,
    				requireAuth: true,
    			}
    		},
        ]
    })

有什么问题可以下方留言,共同探讨

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关如何判断用户是否登录？

前端判断if(!后端判断myFilter。

向右看齐/ 2024年04月24日 05:08/ 0 赞/ 85 阅读

相关 cookie+session+redis+springAop判断用户是否登录

采用前后端分离，后端只提供接口，前端对接口进行调用 **1.前端用户发送登录请求** `login.html` <div class="form-...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 14:22/ 0 赞/ 66 阅读

相关 SpringMVC应用拦截器判断用户是否登录

拦截器定义实现HandlerInterceptor接口，实现接口方法。 import javax.servlet.http.HttpServletReques

约定不等于承诺〃/ 2023年10月18日 09:18/ 0 赞/ 135 阅读

相关 vue全局前置,判断用户是否登录

说白了就是路由拦截,点击一个路由,判断一下是否为登录状态,如果是登录状态跳转到首页或其他页面,如果不是登录状态就跳转到登录页面思路就这么简单,接下来看看代码吧 index

拼搏现实的明天。/ 2023年06月19日 06:58/ 0 赞/ 15 阅读

相关 Spring Security判断用户是否已经登录

原创地址：https://www.jianshu.com/p/70569b64f9a9 方法一、JSP中检查user principal <c:if test="$

心已赠人/ 2023年06月10日 10:28/ 0 赞/ 29 阅读

相关 php 点功能判断是否登录,php判断是否登录

index.php session\_start(); if(isset($\_SESSION\["name"\])&&time()>$\_SESSION\['name'\

Bertha 。/ 2023年01月19日 07:07/ 0 赞/ 183 阅读

相关【Django】用户登录与注销、判断用户是否登录

我们可以可以使用Django的认证功能来管理用户的登录与注销 1.login()登录 login()函数需要request和user这两个参数，它会把user的信息写入

谁践踏了优雅/ 2022年12月04日 01:04/ 0 赞/ 245 阅读

相关 jsp判断用户是否登录

JSP通过session判断用户是否登录: 登录的时候把当前用户存到session中: User user = request.getParamet

亦凉/ 2022年06月15日 12:51/ 0 赞/ 264 阅读

相关 vue路由跳转时判断用户是否处于登录状态

> vue路由跳转时判断用户是否处于登录状态 > > -------------------- > > > > 1. 引入[vue][]x 在其中存储用户状

左手的ㄟ右手/ 2022年03月19日 05:36/ 0 赞/ 457 阅读

相关 vue-router 钩子函数（路由拦截)，判断用户是否登录，未登录拦截

1、全局的钩子 beforeEach（to，from，next） afterEach（to，from，next） 2、组建内的导航钩子组件内的导航钩子主要有这三种：

野性酷女/ 2022年01月29日 13:23/ 0 赞/ 382 阅读