动态路由权限，按钮的权限，菜单权限分别是怎么实现的

首先什么是前端权限控制：

就是当用户登录之后，根据不用用户拥有的权限动态添加（addRoutes）用户能访问的路由页面和能看到的菜单页面(v-for)

动态路由权限：

1.本质就是利用addRoutes这个api来实现动态添加路由权限，然后还可以根据路由权限渲染用户可以看到的菜单选项

2.前端来维护两份路由表 ，一份静态路由表这个是所有用户都可以访问的，一份是动态路由表，那么默认挂载的只有静态路由表

3.用户登录成功之后会得到一个路由权限列表，我们就可以根据这个权限列表对动态路由表进行筛选（filter） 吧筛选之后的路由用addRoutes追加到路由表中。相当于数组的push方法

菜单权限：

也是根据筛选出来的动态路由表加上静态路由表，用v-for循环渲染出用户可以看到的菜单选项（可以通过vuex用getter获取到筛选过后的数据）

按钮的权限：

方法1.因为按钮权限不止一个页面会用到 ，所以可以用mixin做一个全局混入效果，封装一个mixin的组件然后通过vue.mixin全局混入，mixin里面可以定义一个methods，里面再封装一个方法，方法接收一个参数，拿到这个参数会去用户的按钮权限点列表筛选( 可以用数组的includes)看看这个参数用户的权限列表中是否存在，返回的是布尔值 ，如果存在就说明用户有这个按钮的操作权限，如果不存在就说明用户没有这个权限 然后可以进行相对应的禁用和启用，

//第一步在 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)

//第三步 在页面的按钮中使用  ADD-SOCIAL就是按钮权限点的标识  要跟后台的数据同步
<el-button type="primary" :disabled="checkPermission('ADD-SOCIAL')">添加</el-button>

方法2.

可以自定义一个全局的指令  也是跟上面一样的思路  也是通过传参 然后在用户的权限点列表中判断是否存在这个权限点 ，