state.permissionList = payload
}
},
actions: {
getPermissionList: async ({ state, commit }) => {
// 这里是为了防止重复获取
if (state.permissionList.length) return
// 发送请求方法省略
const list = await api.getPermissionList()
commit('updatePermissionList', list)
}
}
}
// @/utils/permission
import store from '@/store'/**
* 判断是否拥有权限
* @param {Array<string>} permissions - 要判断的权限列表
*/
function includePermission (permissions = []) {
// 这里要判断的权限没有设置的话，就等于不需要权限，直接返回 true
if (!permissions.length) return true
const permissionList = store.state.permissionList
return !!permissions.find(permission => permissionList.includes(permission))
}
重定向问题
以上我们解决了路由的基本配置与权限如何获取，怎么限制路由跳转，接下来我们要处理的就是重定向问题了。
这一点可能和我们项目本身架构有关，我们项目的侧边栏下还有子级，是以下图中的 tab 切换展现的，正常情况当点击药品管理后页面会重定向到入库管理的 tab 切换页面，但当入库管理没有权限时，则应该直接重定向到出库管理界面。
所以想实现以上的效果，我需要重写 router 的 redirect，做到可以动态判断（因为在我配置路由时并不知道当前用户的权限列表）
然后我查看了 vue-router 的文档，发现了 redirect 可以是一个方法，这样就可以解决重定向问题了。
vue-router 中 redirect 说明 ，根据说明我们可以改写 redirect 如下：
// 我们需要引入判断权限方法
import { includePermission } from '@/utils/permission'const children = [
{
path: 'list',
name: 'UserList',
label: '用户列表',
meta: {
permissions: ['U_1_1'] }
},
{
path: 'group',
name: 'UserGroup',
label: '用户组',
meta: {
permissions: ['U_1_2'] }
}
]
const routeDemo = {
path: '/user',
name: 'User',
label: '用户',
redirect: (to) => {
if (includePermission(children[0].meta.permissions)) return { name: children[0].name }
if (includePermission(children[1].meta.permissions)) return { name: children[1].name }
},
children
}
虽然问题解决了，但是发现这样写下去很麻烦，还要修改 router 的配置，所以我们使用一个方法生成：
// @/utils/permission
/**
* 创建重定向函数
* @param {Object} redirect - 重定向对象
* @param {string} redirect.name - 重定向的组件名称
