Vue面试题07：Vue如何做权限管理？控制到按钮级别的权限怎么做？

Vue如何做权限管理？控制到按钮级别的权限怎么做？

• 权限管理一般需求是两个：页面权限和按钮权限

• 下面从前端方案和后端方案分开阐述：

  • 前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的 meta 中添加一个 roles 字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes（accessRoutes）方式动态添加路由即可；
  • 后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息

• 按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮（是DOM操作）。

• 纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！

• 实现细节：服务端返回的路由信息如何添加到路由器中？

// 前端组件名和组件映射表
const map = {
  // "xx":require("@/views/xx.vue") //同步方式
  "xx": () => import("@/views/xx.vue") // 异步方式 
}
// 后端返回的asyncRoutes
const asyncRoutes = [
  { path: "/xx", component: "xx" }
]
//遍历asyncRoutes，替换component
function mapComponent(asyncRoutes) {
  asyncRoutes.forEach(route => {
    route.component = map[route.component]
    if (route.children) {
      mapComponent(route.children)
    }
  })
  return asyncRoutes
}
mapComponent(asyncRoutes)