用户权限 401 与 菜单显示隐藏 404 的 BUG

[ToQuery]

Bug report（问题描述）

当权限不足的用户，进入页面时，无法区分权限不足还是因为路径错误导致的 404

Steps to reproduce（问题复现步骤）

1. 正常运行前端项目，登录并进入系统
2. 更改用户角色为edit
3. 尝试进入 需要admin角色的页面，结果进入404页面

正常处理

更改用户角色后，尝试未授权页面，应提示未授权，进入错误路径时可提示 404

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Your OS: mac
• Node.js version:
• vue-element-admin version: all version

[a1029382825]

因为路由是动态挂载的，我也遇到这个问题，现在也不知道怎么解决

[xxkiko]

同问，大佬 翻哈牌啊

[hedekun]

因为路由是动态挂载的，当admin登录系统时候，全部都挂载了。
更改角色edit的时候，作者直接把他过滤掉了，所以再次进入页面没有相应的路由匹配，匹配到最后一项{ path: '*', redirect: '/404', hidden: true }
实现你的需求很简单啊，不是过滤没有权限的路由，而是将没有权限的redirect: '/401'，返回的仍然是完整的路由。

[tomatobybike]

如上，我的提交，已经修复此bug。改动点如下：
#1. store/modules/permission.js 的 GenerateRoutes原代码默认加载所有动态路由，修改为

`
public GenerateRoutes(roles: string[]) {
let accessedRoutes
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)

/*
无论是否管理员，都按照角色过滤
if (roles.includes('admin')) {
  accessedRoutes = asyncRoutes
} else {
  accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
} */
console.log(`accessedRoutes`, accessedRoutes)
this.SET_ROUTES(accessedRoutes)

}`

#2. 当前逻辑，动态路由，使用filterAsyncRouter方法，过滤掉当前用户无权限的路由例如/icon/index,用户访问自然会到404页面，因为路由里匹配不到。修改store/modules/permission.js,改为无权限路由隐藏
`/**

• 递归遍历异步路由表，返回符合用户角色权限的路由表
• 权限不符合的路由设置隐藏，配置hidden为true
• @param asyncRouterMap
• @param roles
  */
  function filterAsyncRouter(asyncRouterMap, roles) {
  const accessedRouters = asyncRouterMap.map(route => {
  if (hasPermission(roles, route)) {
  if (route.children && route.children.length) {
  route.children = filterAsyncRouter(route.children, roles)
  }
  return route
  } else {
  if (route.children && route.children.length) {
  route.children = filterAsyncRouter(route.children, roles)
  }
  Object.assign(route, { hidden: true })
  return route
  }
  })
  return accessedRouters
  }`
  这样，左侧菜单栏用户无权限的页面是不会显示在菜单栏，

#3. 增加拦截器，无权限页面，用户从地址栏输入做拦截跳转到401
修改 vue-element-admin/src/permission.js 文件 路由守卫
`// 判断当前路由是否配合当前用户的角色
const isForbidden = (pathRoles, userRoles) => {
return !pathRoles.some(role => userRoles.includes(role))
}

router.afterEach((to, next) => {
if (to.meta.roles && to.meta.roles.length > 0) {
const roles = store.getters.roles
const forbidden = isForbidden(to.meta.roles, roles)
console.log(forbidden, forbidden)
if (forbidden) {
router.replace('/401')
}
}
NProgress.done() // finish progress bar
})`

=========================

#4. 修改路由文件src/router/index.js，用/icon 路由做测试
{ path: '/icon', component: Layout, meta: { roles: ['editor'] // you can set roles in root nav }, children: [ { path: 'index', component: () => import('@/views/svg-icons/index'), name: 'icons', meta: { title: 'icons', icon: 'icon', noCache: true, roles: ['editor'] } } ] }
##这样，用户使用admin账号登录，角色是admin在地址栏输入不存在的路由/hellowold，会跳转404，输入无权限的路由例如/icon会重定向到/401.

如果用是使用editer角色登录，左侧菜单栏是可以看见/icon菜单，地址栏输入，也是可以访问