一直對直播app原始碼的許可權設計很感興趣，以前寫後端程式碼時，搞過許可權設計，挺有意思的，但是前端按鈕級別的許可權設計瞭解過，卻還沒具體實現過，在直播app原始碼開發中打算對許可權進行細分，先研究下前端的許可權吧。

許可權設計的出發點在於，讓直播app原始碼中不同許可權的使用者，看到的內容、可實現的操作是不同的。
到具體設計上來說，可以分為路由級許可權和按鈕級許可權，從實現的難以層度上來說，都挺簡單的，這篇部落格主要講直播app原始碼中按鈕級別的許可權控制。

按鈕級許可權需要做的是什麼？

做直播app原始碼的許可權控制，首先要知道要實現的目的是什麼。
按鈕級許可權控制比較簡單，根據身份不同，可以看到的按鈕、可操作的功能也不相同。
首先要進行身份的區分和校驗，可根據服務端下發的使用者許可權類別，提取出公共方法。

// ../utils/auth.js 檔案位置
//獲取當前客戶許可權
export function getCurrentAuthority(){
    ...
    return ["admin"]
}
//校驗許可權
export function check(authority = []){
    let current = getCurrentAuthority();
    return current.some(item => authority.includes(item))
}
//登入校驗
export function isLogin(){
    const current = getCurrentAuthority();
    return current && current[0] !== "guest";    
}

兩種實現方法

抽離出公共方法進行身份提取和校驗後，在直播app原始碼的不同元件中就可以使用了，最粗暴的方法，就是直接使用 v-if 來進行瘋狂的判斷。
但是這種方法不優雅，而且會對原有就使用 v-if 的內容造成困擾，因此可以將許可權判斷進行使用上的封裝，主要有兩種方法，一是元件，二是指令。

1. 元件方式

既然 v-if 不太優雅，那麼是否可以將 v-if 的功能封裝呢，答案當然是可行的，我們只需要在直播app原始碼中需要許可權控制的內容外部再巢狀上一層元件，通過外層元件來判斷內層元件是否渲染，就可以實現我們所需要的 v-if 的能力。
關於這個許可權元件，我們可以進行思考下。
首先，許可權元件並不需要有具體的 dom 渲染，它的作用只是根據條件來判斷是否來渲染它巢狀的具體業務元件。這樣的話，它可以不具備 template 模板內容，只需要具體邏輯即可，這樣它可以只是純粹的函式式元件，通過引用封裝好的許可權校驗方法，來判斷props中所允許的許可權。
元件實現：

<script>
import { check } from "../utils/auth.js";
export default {
    name: 'Authorized',
    functional:true,
    props: {
        authority:{
            type:Array,
            required:true
        }
    },  
    render(h, context) {
        const { props, scopedSlots } = context;
        return check(props.authority) ? scopedSlots.default() : null
    },
}
</script>

思路：
通過 props 傳遞允許的許可權，在 render 函式中，通過上下文取出 props 和 slot 插槽內容，通過 check 方法校驗 props 傳遞的許可權是否通過，根據結果渲染 slot 的內容，實現直播app原始碼許可權控制。
元件使用：

<template>
    <Authorized :authority="['admin']" >
        <other-components></other-components>
    </Authorized>
</template>

注：Authorized 元件會在多個地方使用，可以進行全域性註冊，具體程式碼不展示

2.指令方式

使用元件方式進行直播app原始碼許可權控制，基本已經可以很好的滿足我們實現按鈕級許可權控制的需求了，只需要在需要控制許可權的按鈕外面新增元件。
不過每次都需要在外面巢狀元件，還是比較繁瑣的，我們可以參考下 v-if 進行自定義指令控制。

//./directives/auth.js
import { check } from '../utils/auth.js';
function install(Vue, options = {}) {
    Vue.directive(options.name || 'auth', {
        inserted(el, binding) {
            if (!check(binding.value)) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        }
    })
}
export default { install }

思路：
接收自定義指令 binding 中傳遞的引數，通過 check 函式進行校驗，校驗未通過時，獲取當前指令所在節點的父節點，來刪除掉當前節點，實現直播app原始碼許可權控制。
指令註冊：

// main.js
import auth from './directives/auth.js'
Vue.use(auth)

指令使用：

<template>
	<other-components v-auth="['admin']"></other-components>
</template>

優缺點

使用元件方式來實現許可權控制，在許可權修改後會比較靈活的渲染受控部分，同時使用時候會稍微繁瑣；
指令方式實現的直播app原始碼許可權控制，使用起來會比較簡潔，但是是通過刪減 dom 節點的方式實現的，因此只有在第一次時控制。
許可權在賦予後，不會隨意變動，可以根據直播app原始碼使用場景來選用兩種不同的方式。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

實現直播app原始碼前端許可權設計，需要做什麼？

按鈕級許可權需要做的是什麼？

兩種實現方法

優缺點

相關文章