什么是角色权限呢？
1.思想: 不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。
2.登录: 当用户填写完账号和密码后服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后(我会将这个token存储到cookie中)，保证刷新页面后能user_info的接口来获取用户的详细信息(如用户权限，用户名等等信息)。代码如下：
this.$store.dispatch('Login',this.loginForm).then( () => {
this.loading = false;
// 登录完成跳转的页面
this.$router.push({path:'/'});
}).catch( () =>{
this.loading = false
})
3.目标： 通过token获取用户的role，动态根据用户的role算出其相应有权限的路由，通过router.addRoutes动态挂载路由。
4.vuex：
moduels：
①user
②permisson
第一在actions生成路由
// 生成路由
GenerateRoutes ({commit},data) {
return new Peomise (resolve => {
const {roles} = data
let accessedRoutes
// 如果路由中包含admin
if(roles.indexOf('admin') >= 0) {
accessedRoutes = asyncRouterMap
} else {
accessedRoutes = filterAsyncRouter (
asyncRouterMap, roles)
}
commit ('SET_ROUTERS,', accessedRoutes);
resolve();
})
}
第二在mutations根据权限设置路由
(states.routers) => {
state.addRoutes = routers;
state.routers = constantRouterMap.concat(routers);
}
5.通过登录获取到token去获取用户的信息： 全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了 router.beforeEach
if(store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// 拉取
user_info
const roles = res.data.role;
next(); // resolve 钩子
})
}
从后端获取到用户信息
{
"code":200,
"data":{
"avatar":"https://baidu.com/123.gif",
"name":"admin",
"role":[
"admin"
]
}
}
6.根据用户信息中的role去动态添加路由: 用户登录之后，通过token获取用户的role，动态根据用户的role算出其相应有权限的路由，再通过router.addRoutes动态挂载路由
store.dispatch('GenerateRoutes',{roles}).then(() => {
// 动态添加路由
router.addRoutes(store.getters.addRoutes);
next({...to);
})
注意事项：
1.根据路由处理Token过期处理：
service.interceptors.response.use里面进行处理
2.根据角色动态生成侧边栏 （下面是一个例子）
curl -X POST -d "mobile = 13590099999&password = yyy123456%role_name = 2"http://192.168.1.102:8080/api-token-auth/
