先後端分離模式下的權限控制方案

在先後端分離的模式下，全部的交互場景都變成了數據交互，所以傳統業務系統中的權限控制方案在前端已經再也不適用（好比使用後臺模板標籤進行權限控制），須要另外設計權限控制方案。

權限控制的概念

要理解權限控制，須要明白兩個概念：資源和權限。

資源：對於一個系統來講，系統內部的全部信息均可以理解爲是這個系統的資源。頁面是資源、數據是資源、按鈕是資源、圖片也是資源。

權限：權限就是訪問某個資源所須要的標識。不管系統的權限如何設計，在用戶登錄的時候都須要計算當前登錄用戶所擁有的權限標識集合，這樣才能肯定這個用戶所能訪問的系統資源。

由上面能夠得出，權限控制是控制登錄用戶對於系統資源的訪問。

先後端在權限控制中各自的職責

要弄清先後端在權限控制中各自的職責，須要明白先後端在系統中各自的職責。

服務端：提供數據接口。

前端：路由控制、頁面渲染。

因爲前端負責與用戶交互，這就意味着，用戶所能操做的資源入口就都是由前端進行控制，那麼前端的權限控制就包括了前端路由的權限控制和頁面內組件的權限控制。

前端路由的權限控制：過濾非法請求，用戶只能訪問權限範圍以內的頁面資源。

頁面內組件的權限控制：根據用戶的權限控制頁面組件的渲染，包括各類按鈕、表格和分割線等。

隨着前端組件化的快速發展，用戶所看到的一切均可以理解爲組件。頁面是一個大組件，其內部由各類小組件拼湊而來，那麼前端權限的控制最終就落地到了對組件的權限控制。

<組件 permission='xxx' />

這樣，前端就能夠渲染出用戶權限範圍內的各類系統資源。可是卻不能保證數據接口的安全性，由於某些比較喜歡折騰的用戶徹底能夠越過前端的頁面訪問系統的數據接口。服務端的權限控制最終仍是要落地到對接口的權限驗證。

簡單實現

理論上來講，系統的一切資源都是能夠進行權限控制的，實際上也能夠作獲得，只是實際場景中並不須要細化到頁面上一條分割線這種程度，最細的粒度通常只是到按鈕級別。

前端

前端路由權限控制，能夠經過在用戶登錄的時候存儲在前端的用戶所擁有的權限標識集合，在路由變化時進行權限判斷。具體是，權限驗證經過則渲染對應頁面，不然渲染403組件。

let hasPermission = permission.check(current.permissionName);

<div className={styles.content}>
    {hasPermission ? children : <Exception type={403}/>}
</div>

服務端

服務端的權限驗證很好理解，一個最簡單的實現是使用攔截器驗證當前請求的權限。

public class SsoAuthorizeInterceptor extends HandlerInterceptorAdapter {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 校驗權限
    }
}

總結

全部業務組件的設計理念均是要結合服務端接口進行組件的封裝，兼顧靈活性的同時能夠保證更優的業務開發速度。

 

"不可能實現的諾言最動人。"