vue-admin-element 搭建后台管理系统学习 -- 权限之动态渲染侧边栏
动态渲染侧边栏 (权限)
在后台管理系统中权限分配角色权限之类的是必不可少的，项目用的是vue-admin-element一个后台基础模板，关于权限路由在vue-element-admin集成模板中有详细的代码，这里是我在项目中开发学习整理的。以下内容是用户的粗粒度权限，关于细粒度（按钮级）权限的可以根据token来限制。
主体逻辑：
- 前端有两个路由表，一个constantRoutes（全部成员可访问）一个asyncRoutes（需要权限访问）
- 用户登录有返回一个token，拿到token请求用户信息，用户信息中返回当前角色拥有的权限roles列表
- 根据roles在asyncRoutes路由表中 过滤出可访问的路由 生成动态路由表，根据什么过滤：在每个路由元信息中定义一个roles属性，将路由元信息中的roles跟返回的roles权限目录对比
- 挂载路由 addRoutes
具体实现：
1.创建两个路由表
// 普通路由 全部成员都可以访问
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'dashboard'}
}]
},
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: '案例表格', icon: 'dashboard' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table'}
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},{
path: '/uploadExcel',
component:Layout,
children: [
{
path: 'index',
name: 'UploadExcel',
component: () => import('@/views/uploadExcel/index'),
meta: {title: '上传excel',icon: 'dashboard'},
}
]
}
]
// 需要权限的路由表
export const asyncRoutes = [
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: '表单', icon: 'form', roles:['peng']}
}
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: '跳转', icon: 'link' }
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
注意 在constantRoutes 路由中不能定义404.它的层级会高于asyncRoutes 如果定义了你访问的时候只能访问到404页面。放在asyncRoutes 最后即可。
2.用户登录返回token这个在store=>user中的actions(更改state,通过提交mutations) login方法中获取
store/user
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
// console.log(data)
// 更改store中的状态 通过提交mutations 调用commit方法，第一个参数 一个回调函数，执行修改逻辑的函数，第二个 是mutations的载荷(一般为你需要修改的状态值)
commit('SET_TOKEN', data.token)
setToken(data.token) // 将token设置到cooke中
resolve()
}).catch(error => {
reject(error)
})
})
},
```这里就拿到token了，
3.通过token获取用户信息
store/user
```javascript
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
console.log(data)
if (!data) {
reject('登录失效，请重新登录.')
}
const { roles, name, avatar, introduction } = data
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
拿到用户信息后，做了几件事，1.将拿到的用户roles权限目录 设置到state中，便于以后使用，2.设置名字及其他信息到state中，3.返回拿到的用户信息-data
3.接下来就是根据拿到的roles跟自己定义路由表中的roles对比 获取有权限的路由，就是store/modules中的permission.js 使用vue-admin-element时创建这个js,具体代码直接去集成模板中拿 创建好之后，在store/index.js 中注入这个permission模块，再来看看permission中的具体逻辑
import { asyncRoutes, constantRoutes } from '@/router'
//引入路由表
const state = {
routes: [],
addRoutes: []
}
//定义state
// 创建mutations用于更改state
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes) // 组合路由,将原始路由和权限路由组合生成路由表
}
}
const actions = {
// 这里就是获取 权限路由 参数roles即是用户信息中返回的roles
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
// if (roles.includes('admin')) { 如果是管理员 直接返回定义的权限路由表
// accessedRoutes = asyncRoutes || []
// } else {
// accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) 不是就过滤定义的权限路由表，返回有权限的路由
// }
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
commit('SET_ROUTES', accessedRoutes) // 更改state
resolve(accessedRoutes) // 返回 生成的权限路由表
})
}
}
具体方法
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
}
// 判断在mate中定义的roles是否包含用户角色返回的roles
export function filterAsyncRoutes(routes, roles) {
const res = []
// 循环定义的asyncRoutes权限的路由表
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) { // 如果有子项 进行递归过滤
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp) // 如果定义的mate中roles包含用户roles中的某一项 则添加到res中
}
})
return res
}
以上步骤 就完成了 获取用户信息的roles 及根据roles获取动态的路由 之后就是挂载路由
这一步在src目录下的permission中
// 路由守卫 全局钩子，每一次页面刷新都会执行
router.beforeEach(async(to, from, next) => {
NProgress.start()
// 设置标题
document.title = getPageTitle(to.meta.title)
const hasToken = getToken() // 获取token
if (hasToken) {
if (to.path === '/login') {
next()
NProgress.done()
} else {
// let toPath = to.path
const hasRoles = store.getters.roles && store.getters.roles.length > 0 // 判断是否获取了用户信息并拿到roles
if (hasRoles) {
next() // 如果获取了 放行
} else { // 没有就获取用户信息
try {
// 返回的roles如: ['admin'] or ,['developer','editor']
const { roles } = await store.dispatch('user/getInfo') // 通过token获取相应权限数组
const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // 根据角色生成可访问路由图
// 动态添加可访问路由，生成侧边栏
router.addRoutes(accessRoutes)
// hack方法，以确保addRoutes是完整的
// 设置replace: true，这样导航将不会留下历史记录
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
Message.error('Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在白名单中的path 直接放行
next()
} else {
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
到这里 动态路由就完成也就是根据不同权限展示不同页面的功能。
爱生活、爱编程！
