权限
系统权限 这一概念多出现在 b端 项目中。尤其是公司内部涉及到敏感数据的系统，一般都会进行权限管理，否则万一某个不知情员工在不知情的情况下进行一些操作，可能后果就会很严重。
用户触发权限验证的情况一般有两种：
- 访问某个页面
- 在页面上进行某些交互（比如点击按钮）
那想要做权限管理就需要从触发权限的源头进行控制：
-
访问页面 -> 路由守卫
- 用户进行路由跳转时，进行路由验证，如果没有权限，给出提示、拦截跳转 or 统一跳其他页面
-
页面视图and交互
- 我们可以让用户只看见她有权限访问的页面菜单导航
- 或者对一些按钮进行一些权限禁用
路由权限
（1）方案一：
- 初始化时就挂载全部的路由，并在路由注册时添加上相应属性来标记访问权限。
- 在全局路由守卫里，进行跳转权限判断。
// 路由注册
const routeMap = [ { path: '/task', component: import('@/views/task/index'), redirect: '/task/index', meta:{ title: 'taskDetail', roles: ['admin' , 'editor' , 'visitor']
},
children: [{
path: 'edit'
component: import('@/views/task/edit'),
meta:{
title: 'taskEdit',
roles: ['admin' , 'editor']
},
}]
}
]
// 全局路由守卫
router.beforeEach((to, from, next) => {
// 用户的身份属于路由权限的范围
if(to.meta.roles.includes(user.info)){
next()
}else{
// 没有权限的话，跳权限不足的页面（在该页面可以引导用户进行权限申请）
next('/page-401')
}
})
「缺点」
- 每次跳转都要进行判断
（1）方案二：
-
初始化的时候只挂载那些不需要权限控制的页面，比如登录页。
-
登录后，根据用户信息，做权限判断，调用 addRoutes 只添加用户有权限访问的路由
-
且前端视图展示做限制or交互做限制
- 这里的权限筛选，可以在前端做 - 也可以后端做，然后返回有权限的路由
router.forEach(async (ro,from,next)=>{
...
const userRoles = await store.disptch('getUserInfo')
const accessRoutes = store.dispatch('getAccessRoutes',roles)
router.addRoutes(accessRoutes)
...
}
})
