日常開(kāi)發(fā)中權(quán)限控制有兩種情況，
第一種情況是在路由攔截那里控制菜單欄的顯示隱藏及跳轉(zhuǎn)操作，
第二種情況是頁(yè)面上某一個(gè)按鈕控制是否隱藏

第一種情況

這種一般是在js中或者el-menu中處理，所以就不簡(jiǎn)述了

第二種情況

index.vue

<el-button
      class="el-button-delete"
      @click="handleDelete"
      v-permission="'delete'"
><i class="el-icon-delete"></i>刪除</el-button>

config/index.js

const permissionFn = function (code) {
  let arr = ['edit','add']; // 沒(méi)有刪除權(quán)限
  // let arr = ['edit','delete','add']; // 有刪除權(quán)限
  sessionStorage.setItem('authCode',arr);  // 這里使用vuex更好，本次只是模擬
  let authCodes = sessionStorage.getItem('authCode'); // 這里使用vuex更好，本次只是模擬
  return authCodes.includes(code);
};

directive/permission.js

import { permissionInit } from '@/config/index';
export default {
  mounted (el, binding) {
    let permission = binding.value;
    if (permission) {
      let hasPermission = permissionInit(permission);
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import permission from '@/directives/permission';
createApp(App)
  .directive('permission', permission)
  .mount('#app')