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

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

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

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,
			}
		},
    ]
})

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