Vue中後臺鑑權 - 自定義指令實現權限顆粒化

由於項目的後端接口部署在easy-mock上面，因此接口偶爾會掛掉，若是出現登陸網絡錯誤，確定是easy-mock掛了，過段時間就好(感謝easy-mock的開發者以及維護者)

借用大佬的一張圖，侵權立刪

說一行代碼有點誇大的意思，感謝vue提供了完善的api，讓咱們能夠用最少的代碼實現功能，這也是我本身想出來的，因此保不齊存在一些考慮不周的問題，若是有問題請評論🤣

前言

上星期在掘金髮布了Vue中後臺鑑權的另外一種思路 - 動態路由的實現與優化，有同志在評論下提出了一些問題

1. vue單點登陸怎麼作

   我以前寫過一個全棧項目，vue+koa2+jwt實現單點登陸 + todolist增刪改查，有項目介紹，感興趣的話能夠看看😄

2. 若是須要大量的按鈕級的權鑑 該怎麼作

   本次文章的主題，這個需求在中後臺很常見，在同一個管理表單中，某些按鈕是不可讓沒有權限的人操做的，那麼就須要將按鈕進行權限的劃分，也就是權限顆粒化

最新案例已經更新到github，歡迎體驗~~ vue-element-asyncLogin， 你的start是個人動力!

實現思路

• 根據後端返回的權限列表進行按鈕的控制
• 須要利於維護，而且較少的代碼進行功能的實現

v-if的實現

很顯然這個使用v-if就能夠完成這個需求，擼一個權限數列的公共效驗函數，而後在v-if中進行使用，可是這樣有一個缺點

每一個須要效驗權限的頁面都須要引入文件，並進行代碼的調用，才能在頁面中使用 v-if

示例代碼:

src\utils\index.js

import store from '../store'

/** * 效驗權限 * @param {String} e 權限標號 */
export function permit(e) {
    return store.getters.roles.includes(e)
}

複製代碼

src\views\dashboard\index.vue

<el-button v-if="basePermit('edit')" type="warning">修改</el-button>
<el-button v-if="basePermit('view')" type="success">查看</el-button>

import { permit } from '../../utils/index.js'
// ...
methods: {
    basePermit(e) {
        return permit(e)
    }
}
複製代碼

這樣雖然能夠實現，可是很麻煩，不少頁面都須要的話，代碼繁瑣，這不是咱們想要的

自定義指令的實現

對於權限顆粒化來講，咱們能夠感受到，功能比較簡單，而且不少頁面都要用，那爲何不使用一種全局均可以使用的方法來實現呢?

使用自定義指令就能夠實現，代碼也會變的異常簡單

1. 在你頁面發生刷新的時候進行權限列表的請求
2. 存儲到vuex或者瀏覽器
3. 建立自定義指令

src\utils\directive.js

import Vue from 'vue'
import store from '../store'
/** * @export 自定義指令 */
export function directive() {
  Vue.directive('permit'， {
    bind(el， binding) {
        // 一行三目運算符就可
      !store.getters.roles.includes(binding.value) ? el.parentNode.removeChild(el) : {}
    }
  })
}

複製代碼

4. 須要引入src\main.js

import { directive } from './utils/directive'
// ....
directive()
// ....
複製代碼

咱們在項目中如何使用自定義指令進行按鈕級別的權限控制呢?

很簡單

<el-button v-permit="'add'" type="primary">增長</el-button>
<el-button v-permit="'delete'" type="danger">刪除</el-button>
<el-button v-permit="'edit'" type="warning">修改</el-button>
<el-button v-permit="'view'" type="success">查看</el-button>
複製代碼

完事了~~~~

demo連接在文章底部

項目截圖

你學會了嗎😄

項目地址 vue-element-asyncLogin， 若是對你有幫助，請不要吝嗇你的start~~😄