這篇文章將為大家詳細(xì)講解有關(guān)基于Vue自定義指令如何實(shí)現(xiàn)按鈕級權(quán)限控制，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

懷來ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

思路：

• 登錄：當(dāng)用戶填寫完賬號和密碼后向服務(wù)端驗(yàn)證是否正確，驗(yàn)證通過之后，服務(wù)端會返回一個token，拿到token之后（我會將這個token存貯到sessionStorage中，保證刷新頁面后能記住用戶登錄狀態(tài)），前端會根據(jù)token再去拉取一個 user_info 的接口來獲取用戶的詳細(xì)信息（如用戶權(quán)限，用戶名等等信息）。

• 權(quán)限驗(yàn)證：通過token獲取用戶對應(yīng)的 role，自定義指令，獲取路由meta屬性里btnPermissions( 注： meta.btnPermissions是存放按鈕權(quán)限的數(shù)組，在路由表里配置 )，然后判斷role是否在btnPermissions數(shù)組里，若不在即刪除該按鈕DOM。

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

路由配置：

path: '/permission',
  component: Layout,
  name: '權(quán)限測試',
  meta: { btnPermissions: ['admin','supper','normal'] }, //頁面需要的權(quán)限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '權(quán)限測試頁',
    meta: { btnPermissions: ['admin','supper'] } //頁面需要的權(quán)限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '權(quán)限測試頁',
    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>

關(guān)于“基于Vue自定義指令如何實(shí)現(xiàn)按鈕級權(quán)限控制”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：基于Vue自定義指令如何實(shí)現(xiàn)按鈕級權(quán)限控制
文章地址：http://chinadenli.net/article16/gsjjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、軟件開發(fā)、網(wǎng)站維護(hù)、微信小程序、微信公眾號、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)