前端权限功能怎么搞啊啊啊？这样！

具体实现步骤

1、登录后拿到token

后续的请求都需要携带上token，让后台知道你是谁，还能拿到用户信息

2、拿权限路由表

拿到不同用户的路由信息，拼装成前端可用的路由信息，然后使用addRoutes将路由加到前端路由表中，实现不同用户对应页面的有无

3、拿按钮、组件的授权标识

拿到按钮的授权标识，存入到vuex中，并且写一个自定义权限指令来控制按钮的有无

4、自定义指令

src/directives/permission.js

import store from '@/store/'
import Vue from 'vue'
Vue.directive('permission', {
    
    
  inserted (el, binding) {
    
    
    const permission = binding.value; // 获取权限值
    const have_permissions = store.state.Common.permissionsArray
    if (!have_permissions.includes(permission)) {
    
    
      el.parentElement.removeChild(el); //不拥有该权限移除dom元素
    }
  }
})

5、在main.js中注册自定义指令

import '@/directives/permission.js'

6、页面使用

这里主要是讲解了一下如何进行权限设计的思路，便于开发理解。