前端權(quán)限：因?yàn)榍岸吮緛?lái)就是不安全的，真正的安全還是需要后端兄弟去把關(guān)，所以后端也必須按做權(quán)限控制！我們前端的權(quán)限校驗(yàn)主要的目的是過(guò)濾不該有的請(qǐng)求和操作，減少服務(wù)端壓力。
一般來(lái)說(shuō)前端權(quán)限在三個(gè)方面：接口權(quán)限、按鈕權(quán)限，路由權(quán)限

二、按鈕權(quán)限

頁(yè)面中有新增，刪除，編輯等操作按鈕。不同用戶（不同角色）應(yīng)該是擁有不同操作權(quán)限的。
例如權(quán)限碼為 0：不可見(jiàn) 1:可操作 2:不可操作
一般前端會(huì)和后端約定好按鈕的名字，后端會(huì)返回一個(gè)按鈕權(quán)限列表。然后我們根據(jù)權(quán)限列表使用v-if指令 或者 自定義權(quán)限指令、達(dá)到相應(yīng)權(quán)限效果。
自定義權(quán)限指令，實(shí)質(zhì)就是根據(jù)相應(yīng)權(quán)限操作dom

按鈕權(quán)限：一般登錄的時(shí)候或者獲取用戶角色時(shí)候，后端會(huì)返回的一個(gè)數(shù)組，前端把數(shù)組存到vuex，再通過(guò)自定義指令或者 v-if 進(jìn)行按鈕級(jí)權(quán)限的操作

圖片.png

v-if 來(lái)控制按鈕權(quán)限

第一步：再u(mài)tils文件夾下面創(chuàng)建 rolesButtom.js文件
import store from "../store/index";
export function buttonPermission(permission){
    const button = store.getters["appStore/buttons"];//獲取 vuex 里面的按鈕權(quán)限數(shù)組
    return button.indexOf(permission) != -1; //-1是客戶沒(méi)有按鈕權(quán)限
}
第二步：在 main.js 文件中引入，掛載到 vue 原型上
// 全局方法引入按鈕權(quán)限(通過(guò)v-if)
import { buttonPermission } from "./utils/rolesButtom";
Vue.prototype.btnPerm = buttonPermission;
第三步：在元素上使用 v-if 來(lái)進(jìn)行判斷客戶是否擁有該按鈕權(quán)限
<template>
   </el-row>
    <el-col :span="2" style="float:left">
      <el-button type="primary" class="ml-10" @click="addInfoStatus = true" v-if="btnPerm('info.edit')">新增</el-button>
    </el-col>
  </el-row>
<template>

圖片.png

自定義指令 來(lái)控制按鈕權(quán)限

Vue.directive("mynewcode",{bind:function(el,binding){..自定義指令中傳遞的三個(gè)參數(shù)
el: 指令所綁定的元素，可以用來(lái)直接操作DOM。
binding: 一個(gè)對(duì)象，包含指令的很多信息。
vnode: Vue編譯生成的虛擬節(jié)點(diǎn)。

自定義指令有五個(gè)生命周期（也叫鉤子函數(shù)），分別是 bind,inserted,update,componentUpdated,unbind

bind:只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于document中）。
update:被綁定于元素所在的模板更新時(shí)調(diào)用，而無(wú)論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新。
componentUpdated:被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind:只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
對(duì)于對(duì)按鈕權(quán)限的操作看你在那個(gè)生命周期操作（ bind 和 inserted都行）

第一步：再u(mài)tils文件夾下面創(chuàng)建 buttonPerm.js文件
import Vue from "vue";
import store from "../store/index.js";
// 自定義指令
Vue.directive("btnPerm",{
    // 父級(jí)未渲染
    bind:function(el, bingind, vnode){
        // el 綁定的對(duì)象 DOM，原生JS處理
        // 操作DOM
        if(bingind.def.hasBtnPerm(bingind.value)) {
            ////我這邊是通過(guò)給元素添加 class 名來(lái)按鈕權(quán)限的操作 
            el.className = el.className + " dsb";
        }
    },
    hasBtnPerm:function(permission){
        const button = store.getters["appStore/buttons"]; // 請(qǐng)求到的數(shù)據(jù)權(quán)限
        const roles = store.getters["appStore/roles"]; // 獲取角色 
        // 如果是超級(jí)管理員全部都可以操作
        if(roles.includes("admin")) { return true }
        return button.indexOf(permission) != -1; //
    }
})

第二步：在main.js文件中引入
// 自定義指令按鈕權(quán)限
import "./utils/buttonPerm";

第三步:  在元素上使用自定義指令 v-btnPerm 來(lái)進(jìn)行判斷客戶是否擁有該按鈕權(quán)限
<template>
  <el-row>
    <el-col>
      <el-button type="danger" @click="search('search')" v-btnPerm="'info.edit'" class="dsn" >搜索</el-button>
    </el-col>
  </el-row>
</template>

圖片.png

未完待續(xù)