1.管理员给账户分配角色
通过api接口的调用给用户添加不同的参数字段标识
2.管理员给角色分配权限
通过api接口的调用,将不同的权限参数绑定给相应的角色
3.路由权限
-
与权限有关的组件路由提取到一个新的js文件中,作为动态权限的路由文件
-
在请求用户信息的函数中,额外添加一个根据用户信息中的角色ID请求权限数据的API请求,并将两次请求的信息拼接在一起,形成一个既包括用户信息,又包括用户权限信息的新用户信息对象,并存储在vuex中
async getUserInfo(store) {
// 获取用户信息
const res = await sysprofile()
// 获取角色基本信息
const res2 = await sysuser(res.data.userId)
// 通过Object.assign()方法将两次请求的数据拼接成新的用户信息
store.commit('addUserInfo', Object.assign({}, res.data, res2.data))
// 根据合并后用户信息中的权限字段,在所有动态路由中筛选出符合条件的路由
const ArrRouter = asyncRouter.filter(item => {
return res.data.roles.menus.includes(item.name)
})
// 通过Router.addRoutes()方法,将筛选出来的路由添加到路由信息中,
Router.addRoutes([...ArrRouter, { path: '*', redirect: '/404', hidden: true }])
}
// 由于Router.addRoutes()方法添加的路由只能在更新后被加载,所以需要将'/404'放在此处,避免初次进入时直接报404错误,并且在路由前置守卫中,需要做如下配置:
// 在获取用户信息的地方添加next(to.fullPath)
// 注意事项:router.matcher = newRouter.matcher 用于重置路由,一方面避免下次登录时会继承上个用户登录的路由权限,另一方面也是为了避免相同的路由节点被重复追加
```html
await Store.dispatch('user/getUserInfo')
next(to.fullPath)
4.菜单权限
背景:addRoutes添加路由信息后,根据路由信息渲染出来的侧边栏中,仍然只有静态路由的选项,没有新动态添加的那几个权限菜单
原因:this.$router.options.routes无法动态获取路由,所以在addRoutes动态添加之后,this.$router.options.routes捕获到的仍只有添加前的静态路由
解决办法:将静态路由和动态路由拼接在一起,并存在vuex中,让渲染侧边栏的数组从vuex中获取动态的数据
```html
// constantRoutes是导入的静态路由,ArrRouter是筛选出来的动态路由
store.commit('route/getRouterList', [...constantRoutes, ...ArrRouter], { root: true })
更改侧边栏的渲染数据来源
this.$store.state.route.routerList
5.按钮权限
根据用户信息中是否包含某个按钮权限字段来决定该按钮是否渲染,以此实现按钮权限
btnPermission: {
inserted(dom, obj) {
if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
dom.style.display = 'none'
}
},
componentUpdate(dom, obj) {
if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
dom.style.display = 'none'
}
}
}```