一般在工作中权限控制主要分为三块：
1.访问页面：用户角色有权能访问的路由模块，一般我们会给每个用户分配一个角色，而此角色往往绑定了相应的权限，而用户能访问到的路由就是由所有角色都能看到的静态路由加他拥有权限访问的动态路由所组成。
实现思路：把角色自带的权限与路由表相对比，通过addRoutes添加到动态路由表中，加上静态路由就完成了。
2.菜单页面：用户所能看到的展示页面，通过v-for遍历动态和静态路由生成。
3.按钮级权限：用户所能操作点击的功能按钮，一般情况下随路由表返回的参数中，还携带了权限点参数，我们拿到这些权限点参数后，就可以根据权限点对按钮进行设置，一般有两种思路进行操作：
- 一种思路是disabled直接禁用此按钮；还有一种思路是隐藏，直接把按钮隐藏不显示。
- 实现思路 登录成功会得到一份权限点列表，里面记录了各个页面上面的按钮能不能操作的标识，我们可以定义一个mixin混入，在里面定义一个方法，用于判断当前这个页面上面某个按钮的权限点是不是在权限点列表中，如果是这个按钮是启用或者显示，如果不是，这个按钮就禁用或隐藏。
- 用户登录成功之后，会得到一份权限点的数组(points),创建一个全局的混入 mixin,在里面定义一个方法 checkPermission，获取到 vuex 中的 points，和当前页面中这个按钮进行判断，看这个按钮需要权限点是不是在这个 points 里面，如果不是就 disabled
// vuex/getters.js
points: (state) => state.user.userInfo.roles.points;//权限点数组 登录成功之后在userInfo中拿到的
//这是一个混入mixin
export default {
methods: {
// 提供一个权限点，看是不是在数组中，返回值是布尔值
checkPermission(point) {
return !this.$store.getters.points.includes(point);
},
},
};
// main.js 注册全局混入
import mixins from './mixins'
Vue.mixin(mixins)
<el-button type="primary" :disabled="checkPermission('ADD-SOCIAL')">添加</el-button>
