Vue 路由--角色的权限控制

Vue 路由–角色的权限控制

思路

首先说明需求目的，一般在未登陆情况下默认跳转至login页面，因此需要导航守卫来确保这一需求。例如忘记密码，注册，404各类提醒等页面的跳转并不需要用户进行登陆验证token操作，因此我们设置了路由白名单让这些路由可以直接渲染。例如角色admin和User需要用户进行登陆操作，这时我们就需要在路由中配置meta的权限role: [‘admin’, ‘user’]来判断需要可以访问的权限。

路由白名单(meta)

// 路由白名单
var constRouters = [
  {
  		path: '/login',
  		name: 'login',
  		component: Login,
  		meta: {title: '用户登录',isshow: true}
  	},
  	{
  		path: '/registUser',
  		name: 'registUser',
  		component: RegistUser,
  		meta: {title: '用户注册',isshow: true}
  	},
  	{
  		path: '/registOrg',
  		name: 'registOrg',
  		component: RegistOrg,
  		meta: {title: '单位注册',isshow: true}
  	},
  	{
  		path: '/',
  		name: 'home',
  		component: Home,
  		meta: {title: '主页',isshow: true}
  	},
  	{
  		path: '*',
  		component: () => import('@/views/NotFound.vue'),
  		meta: {title: '404',isshow: true}
  	}
]
export default constRouters

路由元信息控制(meta)

在一个网站上有不同的角色，要求不同的角色来访问不同的页面，我们的所有的路由都在路由表里，只要访问的时候通过（beforeEach 导航守卫）判断一下角色的权限。如果有权限就访问。没有权限就拒绝访问404。
在构建routers 路由信息的时，我们添加 meta 配置，在meat中添加路由对应的权限，然后在路由导航守卫中判断相关权限，控制路由跳转。
可以在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。
方法1：

// 路由信息
const routers = [
 {
    path: '/index',
    name: 'index页',
    component: index,
    meta: {
       roles: ['admin', 'user']
    }
  },
   {
    path: '/admin',
    name: 'admin页',
    component: admin,
    meta: {
       roles: ['admin']
    }
  },
]

路由守卫

//实例化vue的时候只挂载constRouters
let router = new VueRouter({
	routes: constRouters
})
// 加入其它路由
router.addRoutes(routers)
//假设有两种角色：admin 和 user  
//从后台获取的用户角色
const role = 'user'
//当进入一个页面是会触发导航守卫 router.beforeEach 事件
router.beforeEach((to,from,next)=>{
 	if(whiteList.indexOf(to.path) != -1){
   	 	console.log("白名单")
   	 	next()
   		return
 	}
 	if (!sessionStorage.getItem('token') && to.name !== 'login') {// 未登录 跳转到登录页
		next({path: '/login'})
		return
	} 
	if(to.meta.roles.includes(role)){ //权限
		next()	//放行
	}esle{
		next({path:"/404"})	//跳到404页面
	}
})