默认重定向的路由没有权限时，应寻找 children 中有权限的一项重定向（例：用户路由重定向到用户列表路由，若用户列表没有权限，则应该重定向到用户组路由）
当用户直接输入没有权限的 url 时需要跳转到没有权限的页面或其他操作。（路由限制）
下面我们针对以上问题一个一个解决。
什么时候获取权限，存储在哪 & 路由限制
我这里是在 router 的 beforeEach 中获取的，获取的 permissionList 是存放在 vuex 中。
原因是考虑到要做路由的限制，以及方便后面项目中对权限列表的使用，以下是实现的示例：
首先我们加入权限配置到 router 上：
// 以下只展示部分配置
{
path: '/user',
name: 'User',
label: '用户',
meta: {
permissions: ['U_1'] },
redirect: { name: 'UserList' },
children: [
{
path: 'list',
name: 'UserList',
label: '用户列表',
meta: {
permissions: ['U_1_1'] }
},
{
path: 'group',
name: 'UserGroup',
label: '用户组',
meta: {
permissions: ['U_1_2'] },
redirect: { name: 'UserGroupList' },
children: [
{
path: 'list',
name: 'UserGroupList',
label: '用户组列表',
meta: {
permissions: ['U_1_2_1'] }
},
{
path: 'config',
name: 'UserGroupConfig',
label: '用户组设置',
meta: {
permissions: ['U_1_2_2'] }
}
] }
]}可以看到我们把权限加在了 meta 上，是为了更简单的从
router.beforeEch 中进行权限判断，权限设置为一个数组，是因为一个页面可能涉及多个权限。接下来我们设置 router.beforeEach :
// 引入项目的 vuex
import store from '@/store'
// 引入判断是否拥有权限的函数
import { includePermission } from '@/utils/permission'router.beforeEach(async (to, from, next) => {
// 先判断是否为登录，登录了才能获取到权限，怎么判断登录就不写了
if (!isLogin) {
try {
// 这里获取 permissionList
await store.dispatch('getPermissionList')
// 这里判断当前页面是否有权限
const { permissions } = to.meta
if (permissions) {
const hasPermission = includePermission(permissions)
if (!hasPermission) next({ name: 'NoPermission' })
}
next()
}
} else {
next({ name: 'Login' })
}
})
我们可以看到我们需要一个判断权限的方法 & vuex 中的 getPermissionList 如下：
// @/store
export default {
state: {
permissionList: [] },
mutations: {
updatePermissionList: (state, payload) => {
