What about the front-end permission function? so!

Concrete implementation steps

1. Get the token after logging in

Subsequent requests need to carry tokens to let the background know who you are and get user information

2. Take the authority routing table

Get the routing information of different users, assemble it into the routing information available on the front end, and then use addRoutes to add the route to the front-end routing table to realize whether there are pages corresponding to different users

3. Take the authorization logo of the button and component

Get the authorization ID of the button, store it in vuex, and write a custom permission command to control the presence or absence of the button

4. Custom commands

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. Register custom instructions in main.js

import '@/directives/permission.js'

6. Page usage

Here is mainly to explain how to design permissions, which is easy to develop and understand.