Vue笔记：router 登录权限管理

需求

1. 未登录可访问的页面 / 登陆后不能访问（如登陆/注册页面）
2. 登录可访问的页面 / 未登录不可访问 （如个人中心）
3. 无论是否登录都可以访问的页面 （如商品列表）

方法一

添加 meta: ｛｝字段

routes:[
		{path:'/',redirect:'/home'},
		{path:'/home',component:Home,
		children: [{path: 'goodsinfo',component: GoodsInfo},
			{path:'goodscommen',component: GoodsComment}],
			},
		{path:'/login',component: Login,meta: {Member: true}},
		{path:'/login/register',component: Register,meta: {Member: true}},
		{path:'/login/member',component: Member,meta: {isLogin: true,Member:false}},
	]

meta: —— 未设置表示fales
Member: true —— 登录后不可以访问
Member: false —— 登录后可以访问
isLogin: true —— 未登录不可以访问
isLogin: false —— 未登录可以访问

一定要设置两个字段，否则没有无论是否登陆都能访问的页面。

main.js

router.beforeEach((to, from, next) => {
	//获取用户登录成功后储存的登录标志
	let getFlag = localStorage.getItem("Flag") || sessionStorage.getItem("Flag");
	//判断是否登录
	if (getFlag === "isLogin") {
		next()
		//判断 登录后 是否可以访问
		if (to.meta.Member) {
			alert('请先注销');
			next({
				path: '/login/member'
			});
		} else {
			next()
		}
	} else {
		//判断 未登录 是否可以访问
		if (to.meta.isLogin) {
			next({
				path: '/login',
			})
			alert('请先登录');
		} else {
			next()
		}
	}
});

router.afterEach(route => {
	window.scroll(0, 0);
});

方法二

添加 meta: ｛｝字段

	routes:[
		{path:'/',redirect:'/home'},
		{path:'/home',component:Home,
		children: [{path: 'goodsinfo',component: GoodsInfo,meta: {isLogin: 2}},
			{path:'goodscommen',component: GoodsComment,meta: {isLogin: 2}}],
			},
		{path:'/login',component: Login,meta: {isLogin: 1}},
		{path:'/login/register',component: Register,meta: {isLogin: 1}},
		{path:'/login/member',component: Member,meta: {isLogin: 0}},
	]

meta: —— isLogin 未设置表示 0

	可以访问	不可以访问
登陆	0	1
未登陆	1	0
无论是否登陆	2	X(不存在此状态)