前端權(quán)限控制方案

layman 發(fā)布于2019-08-21 17:32 / 3340人閱讀

摘要：體系下的實(shí)現(xiàn)方式頁面權(quán)限模塊權(quán)限元件權(quán)限三種前端權(quán)限表現(xiàn)形式對應(yīng)不同的管理策略。頁面權(quán)限對于傳統(tǒng)的多頁應(yīng)用，頁面權(quán)限控制不需要前端關(guān)心，后端路由做一層控制。

在做商家后臺管理系統(tǒng)時(shí)，作為前端通常會(huì)設(shè)計(jì)到大量的權(quán)限控制問題，按照細(xì)粒度歸歸類大致可以分類以下三類

頁面權(quán)限

模塊權(quán)限-頁面區(qū)塊（組件）是否顯示

元件權(quán)限-組件內(nèi)元素是否顯示

以往的處理方式

后端會(huì)將用戶權(quán)限數(shù)據(jù)同步注入到VM模板中或者前端發(fā)送異步請求取到權(quán)限數(shù)據(jù)，數(shù)據(jù)消費(fèi)場景一般都散落在代碼的角角落落。

    // 偽代碼
    render(){
        return {window.permission?:null}
    }

    render(){
        return {this.props.permission?: null}
    }

用這種方式實(shí)現(xiàn)的代碼，執(zhí)行上沒有問題，也達(dá)到了業(yè)務(wù)的需求。但是隨著代碼量的遞增，代碼變得難以維護(hù)，特別是新接手的同學(xué)，簡直是一場噩夢。

React體系下的實(shí)現(xiàn)方式

頁面權(quán)限、模塊權(quán)限、元件權(quán)限三種前端權(quán)限表現(xiàn)形式對應(yīng)不同的管理策略。

頁面權(quán)限

對于傳統(tǒng)的多頁應(yīng)用，頁面權(quán)限控制不需要前端關(guān)心，后端路由做一層控制。在SPA架構(gòu)的前端應(yīng)用中，我們的思路是將所有的前端路由配置在后端，對于不同角色的用戶，后端把路由列表吐給前端注冊。

模塊權(quán)限、元件權(quán)限

對于這兩類權(quán)限控制的事就全部需要交給前端處理了，大致思路是將系統(tǒng)中用戶散落的權(quán)限統(tǒng)一配置，通過HOC包裝一下React組件，提供劫持渲染和權(quán)限透傳的能力。

統(tǒng)一管理權(quán)限r(nóng)egisterAuthRules

應(yīng)用的所有權(quán)限配置會(huì)被統(tǒng)一配置在一個(gè)閉包中，權(quán)限的值支持后端同步吐出，也支持每次異步獲取（利用Promise實(shí)現(xiàn)）

// 偽代碼
export const AUTH_RULES = {
    "isX1": window.isX1 === "",
    "isX2": window.isX2 === "",
    "isX3": () => {
        return new Promise((resolve, reject) => {
            resolve(result); // resolve的參數(shù)只能是true或者false
        })
    },
};

registerAuthRules(AUTH_RULES);

權(quán)限規(guī)則表達(dá)式

權(quán)限列表中配置的只是顆粒度最細(xì)的單個(gè)權(quán)限。在實(shí)際業(yè)務(wù)需求中，我們常需要根據(jù)權(quán)限格則組合結(jié)果，決定是否顯示。比如ComponentA的顯示條件是isX1 && isX2 或者 isX1 || isX3。
這里需要引入權(quán)限規(guī)則表達(dá)式的概念。How to compute？
第一步：利用詞法分析器解析出表達(dá)式中有多少個(gè)權(quán)限變量。利用esprima可以輕松取到
第二步：計(jì)算每個(gè)變量對應(yīng)的權(quán)限值
第三部：計(jì)算規(guī)則表達(dá)式，因?yàn)闄?quán)限規(guī)則有可能是異步或者的，這里將每個(gè)格則包裝成Promise對象，利用Promise.all做統(tǒng)一返回，在成功的回調(diào)函數(shù)中通過New Function的方式計(jì)算字符串表達(dá)式的結(jié)果

// 計(jì)算表達(dá)式相關(guān)代碼
function getExpressionValue(expression, data) {
    const codes = [];
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const value =
                typeof data[key] === "string" ? `"${data[key]}"` : data[key];
            codes.push(`var ${key} = ${value};`);
        }
    }
    codes.push(`return ${expression};`);
    return new Function(codes.join(""))();
}

如何使用 registerAuthRules

注冊權(quán)限規(guī)則列表，支持同步規(guī)則和異步規(guī)則
參數(shù):

rules {Object} 應(yīng)用權(quán)限規(guī)則MAP

registerComponentRules

注冊組件顯示規(guī)則，根據(jù)組件displayName配置組件所需權(quán)限列表
參數(shù):

rules {Object} 組件權(quán)限規(guī)則MAP

調(diào)用查看

    export const COMPONENTS_RULES = {
        ComponentA: "isX1",
        ComponentB: "isX1 && isX2",
    };
    registerComponentRules(COMPONENTS_RULES)

Auth HOC函數(shù)

參數(shù):

options {Object} 組件權(quán)限規(guī)則MAP

options.placeholder {Component} 組件隱藏時(shí)的占位節(jié)點(diǎn)；默認(rèn)為noscript

options.initialHide {Boolean} 當(dāng)存在異步權(quán)限規(guī)則時(shí)，組件是否先默認(rèn)隱藏；默認(rèn)值為true

options.rules {Object} 配置組件需要權(quán)限規(guī)則集合，作為props屬性$auth傳遞給組件

1. 組件級別權(quán)限控制

根據(jù)WrappedComponent.displayName判斷組件是否有權(quán)限

class Component{
  // ...
}
Component.displayName = "ComponentA";

const Authed_Component_1 = Auth({
  placeholder: 無權(quán)限的占位節(jié)點(diǎn)
})(Component)

2. 組件內(nèi)部權(quán)限控制（權(quán)限屬性模式）

class Page{
  render(){
    const {$auth} = this.props;
    return (
      
        { $auth.isShowDeleteBtn && 刪除 }
      
    )
  }
}
// 權(quán)限校驗(yàn)條件與權(quán)限屬性，組件內(nèi)容沒有校驗(yàn)邏輯
const Authed_Page = Auth({
  rules: {
    "isShowDeleteBtn": "isVip"
  }
})(Page);

代碼實(shí)現(xiàn)[hoc-auth]https://github.com/amibug/hoc...