基於React的簡單權限設計

前端進行權限控制只是爲了用戶體驗，對應的角色渲染對應的視圖，真正的安全保障在後端。

前言

畢業之初，工做的主要內容即是開發一個後臺管理系統，當時存在的一個現象是：

用戶若記住了某個 url，直接瀏覽器輸入，不論該用戶是否擁有訪問該頁面的權限，均能進入頁面。

若頁面初始化時（componentDidMount）進行接口請求，後端會返回 403 的 HTTP 狀態碼，同時前端封裝的request.js會對非業務異常進行相關處理，碰見 403，就重定向到無權限頁面。

如果頁面初始化時不存在先後端交互，那就要等用戶觸發某些操做（好比表單提交）後纔會觸發上述流程。

能夠看到，安全保障是後端兜底的，那前端能作些什麼呢？

1. 明確告知用戶沒有權限，避免用戶誤覺得本身擁有該權限而進行操做（即便沒法操做成功），直接跳轉至無權限頁面；
2. 攔截明確無權的請求，好比某些須要權限才能進行的操做入口（按鈕 or 導航等）不對無權用戶展現，其實本點包含上一點。

最近也在看Ant Design Pro的權限相關處理，有必要進行一次總結。

須要注意的是，本文雖然基於Ant Design Pro的權限設計思路，但並非徹底對其源碼的解讀（可能更偏向於 v1 的涉及思路，不涉及 umi）。

若是有錯誤以及理解誤差請輕捶並指正，謝謝。

模塊級別的權限處理

假設存在如下關係：

角色 role	權限枚舉值 authority	邏輯
普通用戶	user	不展現
管理員	admin	展現「進入管理後臺」按鈕

某頁面上存在一個文案爲「進入管理後臺」的按鈕，只對管理員展現，讓咱們實現一下。

簡單實現

// currentAuthority 爲當前用戶權限枚舉值

const AdminBtn = ({ currentAuthority }) => {
  if ("admin" === currentAuthority) {
    return <button>進入管理後臺</button>;
  }
  return null;
};
複製代碼

好吧，簡單至極。

權限控制就是if else，實現功能並不複雜，大不了每一個頁面|模塊|按鈕涉及到的處理都寫一遍判斷就是了，總能實現需求的。

不過，如今只是一個頁面中的一個按鈕而已，咱們還會碰到許多「某（幾）個頁面存在某個 xxx，只對 xxx（或/以及 xxx） 展現」的場景。

因此，還能作的更好一些。

下面來封裝一個最基本的權限管理組件Authorized。

組件封裝-Authorized

指望調用形式以下：

<Authorized
  currentAuthority={currentAuthority}
  authority={"admin"}
  noMatch={null}
>
  <button>進入管理後臺</button>
</Authorized>
複製代碼

api 以下：

參數	說明	類型	默認值
children	正常渲染的元素，權限判斷經過時展現		ReactNode
currentAuthority	當前權限	string
authority	准入權限	string/string[]
noMatch	未經過權限判斷時展現	ReactNode

currentAuthority這個屬性沒有必要每次調用都手動傳遞一遍，此處假設用戶信息是經過 redux 獲取並存放在全局 store 中。

注意：咱們固然也能夠將用戶信息掛在 window 下或者 localStorage 中，但很重要的一點是，絕大部分場景咱們都是經過接口異步獲取的數據，這點相當重要。若是是 html 託管在後端或是 ssr的狀況下，服務端直接注入了用戶信息，那真是再好不過了。

新建src/components/Authorized/Authorized.jsx實現以下：

import { connect } from "react-redux";

function Authorized(props) {
  const { children, userInfo, authority, noMatch } = props;
  const { currentAuthority } = userInfo || {};
  if (!authority) return children;
  const _authority = Array.isArray(authority) ? authority : [authority];
  if (_authority.includes(currentAuthority)) return children;
  return noMatch;
}

export default connect(store => ({ userInfo: store.common.userInfo }))(
  Authorized
);
複製代碼

如今咱們無需手動傳遞currentAuthority：

<Authorized authority={"admin"} noMatch={null}>
  <button>進入管理後臺</button>
</Authorized>
複製代碼

✨ 很好，咱們如今邁出了第一步。

在Ant Design Pro中，對於currentAuthority（當前權限）與authority（准入權限）的匹配功能，定義了一個checkPermissions方法，提供了各類形式的匹配，本文只討論authority爲數組（多個准入權限）或字符串（單個准入權限），currentAuthority爲字符串（當前角色只有一種權限）的狀況。

頁面級別的權限處理

頁面就是放在Route組件下的模塊。

知道這一點後，咱們很輕鬆的能夠寫出以下代碼：

新建src/router/index.jsx，當用戶角色與路由不匹配時，渲染Redirect組件用於重定向。

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NormalPage from "@/views/NormalPage"; /* 公開頁面 */
import UserPage from "@/views/UserPage"; /* 普通用戶和管理員都可訪問的頁面*/
import AdminPage from "@/views/AdminPage"; /* 管理員纔可訪問的頁面*/
import Authorized from "@/components/Authorized";

// Layout就是一個佈局組件，寫一些公用頭部底部啥的

function Router() {
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={NormalPage} />

        <Authorized
          authority={["admin", "user"]}
          noMatch={
            <Route
              path="/user-page"
              render={() => <Redirect to={{ pathname: "/login" }} />}
            />
          }
        >
          <Route path="/user-page" component={UserPage} />
        </Authorized>

        <Authorized
          authority={"admin"}
          noMatch={
            <Route
              path="/admin-page"
              render={() => <Redirect to={{ pathname: "/403" }} />}
            />
          }
        >
          <Route path="/admin-page" component={AdminPage} />
        </Authorized>
      </Switch>
    </Layout>
  </BrowserRouter>;
}

export default Router;
複製代碼

這段代碼是不 work 的，由於當前權限信息是經過接口異步獲取的，此時Authorized組件獲取不到當前權限（currentAuthority），假若直接經過 url 訪問/user-page或/admin-page，不論用戶身份是否符合，請求結果未回來，都會被重定向到/login或/403，這個問題後面再談。

先優化一下咱們的代碼。

抽離路由配置

路由配置相關 jsx 內容太多了，頁面數量過多就很差維護了，可讀性也大大下降，咱們能夠將路由配置抽離出來。

新建src/router/router.config.js，專門用於存放路由相關配置信息。

import NormalPage from "@/views/NormalPage";
import UserPage from "@/views/UserPage";
import AdminPage from "@/views/AdminPage";

export default [
  {
    exact: true,
    path: "/",
    component: NormalPage
  },
  {
    path: "/user-page",
    component: UserPage,
    authority: ["user", "admin"],
    redirectPath: "/login"
  },
  {
    path: "/admin-page",
    component: AdminPage,
    authority: ["admin"],
    redirectPath: "/403"
  }
];
複製代碼

組件封裝-AuthorizedRoute

接下來基於Authorized組件對Route組件進行二次封裝。

新建src/components/Authorized/AuthorizedRoute.jsx。

實現以下：

import React from "react";
import { Route } from "react-router-dom";
import Authorized from "./Authorized";

function AuthorizedRoute({ component: Component, render, authority, redirectPath, ...rest }) {
  return (
    <Authorized
      authority={authority}
      noMatch={
        <Route
          {...rest}
          render={() => <Redirect to={{ pathname: redirectPath }} />}
        />
      }
    >
      <Route
        {...rest}
        render={props => (Component ? <Component {...props} /> : render(props))}
      />
    </Authorized>
  );
}

export default AuthorizedRoute;
複製代碼

優化後

如今重寫咱們的 Router 組件。

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import AuthorizedRoute from "@/components/AuthorizedRoute";
import routeConfig from "./router.config.js";

function Router() {
  <BrowserRouter>
    <Layout> <Switch> {routeConfig.map(rc => { const { path, component, authority, redirectPath, ...rest } = rc; return ( <AuthorizedRoute key={path} path={path} component={component} authority={authority} redirectPath={redirectPath} {...rest} /> ); })} </Switch> </Layout> </BrowserRouter>;
}

export default Router;
複製代碼

心情舒暢了許多。

但是還留着一個問題呢——因爲用戶權限信息是異步獲取的，在權限信息數據返回以前，AuthorizedRoute組件就將用戶推到了redirectPath。

其實Ant Design Pro v4 版本就有存在這個問題，相較於 v2 的@/pages/Authorized組件從localStorage中獲取權限信息，v4 改成從 redux 中獲取（redux 中的數據則是經過接口獲取），和本文比較相似。具體可見這次 PR。

異步獲取權限

解決思路很簡單：保證相關權限組件掛載時，redux 中已經存在用戶權限信息。換句話說，接口數據返回後，再進行相關渲染。

咱們能夠在 Layout 中進行用戶信息的獲取，數據獲取完畢後渲染children。

結語

Ant Design Pro從 v2 開始底層基於 umi實現，經過路由配置的 Routes 屬性，結合@/pages/Authorized組件（該組件基於@/utils/Authorized組件——@/components/Authorized的二次封裝，注入currentAuthority（當前權限））實現主要流程。 同時，權限信息存放於localStorage，經過@/utils/authority.js提供的工具方法進行權限 get 以及 set。

仔細看了下@/components/Authorized文件下的內容，發現還提供了AuthorizedRoute組件，可是並未在代碼中使用（取而代之的是@/pages/Authorized組件），翻了 issue 才瞭解到，v1 沒有基於umi的時候，是基於AuthorizedRoute進行路由權限管理的，升級了以後，AuthorizedRoute則並無用於路由權限管理。

涉及到的相關文件比較多（components/pages/utils），v4 的文檔又有些缺失，看源碼的話，若沒有理清版本之間差別，着實會有些費力。

本文在權限信息獲取上，經過接口異步獲取，存放至 redux（和 v4 版本有些相似，見@/pages/Authorized以及@/layouts/SecurityLayout）。