vue后台管理系统权限验证的思路分析

在写后台管理系统时涉及到了权限验证,根据登录角色来设置用户权限.

实现思路

  • 用户登录返回token,根据token去查询用户信息和用户角色;
  • 在router.js中,区分需要权限的路由和不需要权限的路由,先挂载不需要权限的路由,例如登录页/首页这种;
  • 在store里面过滤和动态添加路由,生成最后的路由表state.routers=constantRouterMap.concat(asyncRouterMap);
  • 当页面刷新时;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
router.beforeEach((to,from,next)=>{  //
//根据cookie存储来判断是否登录
if(getCookie('TOKEN')){
if(store.getters.roles.length===0){
store.dispatch('getinfo').then(res=>{ //当页面刷新的时候,重新拉取数据
const roles=res.data.roles
store.dispatch('GenerateRoutes', {roles}).then(()=>{//生成可访问的路由表
router.addRoutes(store.getters.addRouters)//动态添加可访问路由表
next({...to,replace:true})//hack方法,确保addRouters已完成,set the replace: true so the navigation will not leave a history record
})
}).catch(err=>{
console.log('err')
})
}else{
//没有动态改变权限的需求可直接next(), 删除下方权限判断
if(hasPermission(store.getters.roles,to.meta.roles)){
next()
}else{
console.log('err')
}
}
}else{
if(to.path=='/login'){ //想要进入的页面
next() // 当循环到第二次调用的时候,直接进入,第二次进来是以/login的路由进来的
}else{
next('/login') //想要进入的页面
}
}
})

5在组件里面通过getters调用过滤后的路由