Vue JS 3实现双角色登录权限菜单，staff无法访问dashboard如何解决

问题原因 #

你的路由守卫采用了优先级顺序判断的逻辑，而dashboard路由的meta同时开启了requiresAdmin: true和requiresStaff: true，当staff用户访问时：

1. 第一个if判断会先命中requiresAdmin为真的条件，此时会校验用户角色是否为admin
2. staff用户不满足admin条件，直接被路由守卫重定向到登录页，根本不会走到后续else if判断requiresStaff的逻辑分支

另外你原有的代码没有判断accessToken是否存在，未登录状态下直接调用解码方法会抛出JS报错，也建议同步修复。

解决方案 #

这里提供两种可落地的修改方案，你可以根据业务扩展需求选择：

方案一：调整路由守卫判断逻辑（快速适配现有代码） #

把原来的if-else顺序判断改成分别校验权限，只要满足任意一个权限要求就放行：

router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('accessToken')
    // 无token且访问需要权限的页面直接跳登录
    if (!token && (to.meta.requiresAdmin || to.meta.requiresStaff)) {
        next('/auth/login')
        return
    }
    const userRole = VueJwtDecode.decode(token).sub
    // 校验管理员权限
    if (to.matched.some(record => record.meta.requiresAdmin)) {
        if(userRole === "admin"){
            next()
            return
        }
    }
    // 校验员工权限
    if (to.matched.some(record => record.meta.requiresStaff)) {
        if(userRole === "staff"){
            next()
            return
        }
    }
    // 两种权限都不满足的权限页跳登录，公开页直接放行
    if (to.meta.requiresAdmin || to.meta.requiresStaff) {
        next('/auth/login')
    } else {
        next()
    }
})

方案二：优化权限字段设计（更易扩展，推荐） #

把原来分散的requiresAdmin、requiresStaff字段合并为允许访问的角色数组，后续新增角色不需要修改守卫逻辑：

1. 调整路由meta配置：

const adminRoutes = [
    {
        path: '/dashboard',
        name: 'admin.dashboard.index',
        component: () => import( /* webpackChunkName: "admin.dashboard.index" */ '@/views/administrator/dashboard/Index.vue'),
        meta: { allowedRoles: ['admin', 'staff'], layout: 'default' },
    },
    // Article Route
    {
        path: '/article',
        name: 'admin.article.index',
        component: () => import( /* webpackChunkName: "admin.article.index" */ '@/views/administrator/article/Index.vue'),
        meta: { allowedRoles: ['admin'], layout: 'default' },
    },
]

2. 对应修改路由守卫逻辑：

router.beforeEach((to, from, next) => {
    // 不需要权限的公开页面直接放行
    if (!to.meta.allowedRoles) {
        next()
        return
    }
    const token = localStorage.getItem('accessToken')
    if (!token) {
        next('/auth/login')
        return
    }
    const userRole = VueJwtDecode.decode(token).sub
    // 校验当前用户是否在允许访问的角色列表中
    if (to.meta.allowedRoles.includes(userRole)) {
        next()
    } else {
        next('/auth/login')
    }
})

内容的提问来源于stack exchange，提问作者ASHafizullah