思路：

按鈕權(quán)限也可以用v-if判斷，但是如果頁面過多，每個(gè)頁面頁面都要獲取用戶權(quán)限r(nóng)ole和路由表里的meta.btnPermissions,然后再做判斷，感覺有點(diǎn)麻煩，而自定義指令，只需在權(quán)限按鈕加入該指令即可。

廢話不多說，上代碼...

路由配置：

path: '/permission',  component: Layout,  name: '權(quán)限測(cè)試',  meta: { btnPermissions: ['admin','supper','normal'] }, //頁面需要的權(quán)限  children: [   {    path: 'supper',    component: _import('system/supper'),    name: '權(quán)限測(cè)試頁',    meta: { btnPermissions: ['admin','supper'] } //頁面需要的權(quán)限   },   {    path: 'normal',    component: _import('system/normal'),    name: '權(quán)限測(cè)試頁',    meta: { btnPermissions: ['admin'] } //頁面需要的權(quán)限   }  ]

自定義指令：

import Vue from 'vue'/**權(quán)限指令**/const has = Vue.directive('has', { bind: function (el, binding, vnode) {  // 獲取按鈕權(quán)限  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");  if (!Vue.prototype.$_has(btnPermissions)) {   el.parentNode.removeChild(el);  } }});// 權(quán)限檢查方法Vue.prototype.$_has = function (value) { let isExist = false; let btnPermissionsStr = sessionStorage.getItem("btnPermissions"); if (btnPermissionsStr == undefined || btnPermissionsStr == null) {  return false; } if (value.indexOf(btnPermissionsStr) > -1) {  isExist = true; } return isExist;};export {has}

然后在main.js文件引入文件

import has from './public/js/btnPermissions.js';

頁面中按鈕只需加v-has即可

<el-button @click='editClick' type="primary" v-has>編輯</el-button>

結(jié)語：

權(quán)限這種事需要前后端結(jié)合，前端盡可能的去控制，記住：永遠(yuǎn)不相信用戶輸入！

以上所述是小編給大家介紹的基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長站網(wǎng)站的支持！