如何让不同身份的用户,得到不同的菜单?

目录

  1. 如何实现

菜单权限控制是值用户在访问系统时,根据用户的身份限制用户能够访问的菜单项

如何实现

  1. 前端配置默认路由列表全部权限路由列表
  2. 默认路由对象一般只配置 * 和 /
  3. 服务器端定义接口,根据用户信息返回该用户的实际权限路由列表标识
  4. 前端在 main.js 中设置路由的 beforeEach 钩子,在用户访问每个页面时,请求权限校验接口,拿到实际权限路由列表标识
  5. 处理实际权限路由列表标识全部权限路由列表得到实际权限路由列表
  6. 实际权限路由列表动态添加到默认路由列表中得到该用户真实路由列表

    router.addRoutes()

    next({...to, replace:true})

    由于addRoute 有可能不会马上成功 所以官方推荐加上replace(消除历史记录)

  7. 实际权限路由标识列表缓存在 vuex 中一份,减少接口调用次数