12. Vue 项目权限处理

现在权限相关管理系统用的框架都是 element 提供的 vue-element-admin 模板框架比较常见。权限控制通常分为三大块：

• 菜单权限控制
• 按钮权限控制
• 请求 url 权限控制（通常后端完成）

权限管理在前端主要体现在对菜单访问权限的控制。

1. 按钮权限控制很简单，靠后端返回按钮权限标识，然后在前端进行相似隐藏操作 v-if/disabled。
2. url 权限控制主要靠后端来完成
3. 菜单的权限控制相对复杂一些。
   1. 需要在路由设计时，就拆分出静态路由和动态路由
      • 静态路由：所有用户都能访问到的路由，不会动态变化的（登录页、首页、404 页）
      • 动态路由：动态控制的路由，只有用户有对应的权限标识才能加载（审批页、社保页、权限管理页…）
   2. 当用户登录进入首页时，需要立刻发送请求获取个人信息（包含权限的标识数组）
   3. 利用权限信息的标识，筛选出合适的动态路由，通过动态路由的==addroutes==方法，动态添加路由即可。
   4. 现在有个问题： router.options.routes（拿到的是默认的路由项，拿不到新增，它不是响应式的。）因此为了能够正确的显示菜单，为了能欧将来正确的获取到用户路由，我们需要 vuex 来管理 routes 路由数组。
   5. 利用 vuex 中的 routes ，来动态渲染菜单。