日常開發(fā)中權(quán)限控制有兩種情況狈邑，
第一種情況是在路由攔截那里控制菜單欄的顯示隱藏及跳轉(zhuǎn)操作京办，
第二種情況是頁面上某一個按鈕控制是否隱藏
第一種情況
這種一般是在js中或者el-menu中處理烤黍，所以就不簡述了
第二種情況
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']; // 沒有刪除權(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')
