vue-07Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?

235 阅读1分钟
    1. 权限管理⼀般需求是页⾯权限和按钮权限的管理
  • 具体实现的时候分后端和前端两种⽅案:
    • 前端⽅案会把所有路由信息在前端配置,通过路由守卫要求⽤户登录,⽤户登录后根据⻆⾊过滤出路由表。⽐如我会配置⼀个 asyncRoutes 数组,需要认证的在其路由的 meta 中添加⼀个 roles 字段,等获取⽤户 ⻆⾊之后取两者的交集,若结果不为空则说明可以访问。此过滤过程结束,剩下的路由就是该⽤户能访问的页⾯,最后通过 router.addRoutes(accessRoutes) ⽅式动态添加路由即可。
    • 后端⽅案会把所有页⾯路由信息存在数据库中,⽤户登录的时候根据其⻆⾊查询得到其能访问的所有页⾯路由信息返回给前端,前端再通过 addRoutes 动态添加路由信息。

  • 2、按钮权限的控制通常会实现⼀个指令,例如 v-permission ,将按钮要求⻆⾊通过值传给v-permission指令,在指令的 moutned 钩⼦中可以判断当前⽤户⻆⾊和按钮是否存在交集,有则保留按钮,⽆则移除按钮。
    • 纯前端⽅案的优点是实现简单,不需要额外权限管理页⾯,但是维护起来问题⽐较⼤,有新的⾯和⻆⾊需求就要修改前端代码重新打包部署;
    • 服务端⽅案就不存在这个问题,通过专门的⻆⾊和权限管理页⾯,配置页⾯和按钮权限信息到数据库,应⽤每次登陆时获取的都是最新的路由信息,可谓⼀劳永逸!