在 vue 中添加权限控制

如何获取用户权限？

后端（当前用户拥有的权限列表）-> 前端（通过后端的接口获取到，下文中我们把当前用户的权限列表叫做 permissionList）

前端如何做限制？

通过产品的需求，在项目中进行权限点的配置，然后通过 permissionList 寻找是否有配置的权限点，有就显示，没有就不显示。

当我刚开始接到这个需求的时候就是这么想的，这有什么难的，不就获取 permissionList 然后判断就可以了嘛。后来我才发现真正的需求远比我想象的复杂。

真正的问题

上面的需求有提到我们主要解决两个问题，侧边菜单栏的显示 & 页面内操作。

假设我们有这样一个路由的设置（以下只是一个例子）：

import VueRouter from 'vue-router'
/* 注意：以下配置仅为部分配置，并且省去了 component 的配置 */
export const routes = [
  {
    path: '/',
    name: 'Admin',
    label: '首页'
  },
  {
    path: '/user',
    name: 'User',
    label: '用户',
    redirect: { name: 'UserList' },
    children: [
      {
        path: 'list',
        name: 'UserList',
        label: '用户列表'
      },
      {
        path: