Ant Design Pro 鑒權/ 權限管理

https://pro.ant.design/docs/authority-management-cn

 ant-design-pro 1.0.0 V4

 

最近需要項目需要用掃碼登錄，因此就使用antd pro提供的鑒權能力來做

 

 

Authorized.ts

提供初始化路由組件和重載路由的函數

import RenderAuthorize from '@/components/Authorized';
import { getAuthority } from './authority';
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable import/no-mutable-exports */
let Authorized = RenderAuthorize(getAuthority());

// Reload the rights component
const reloadAuthorized = (): void => {
  Authorized = RenderAuthorize(getAuthority());
};

export { reloadAuthorized };
export default Authorized;

 

這里調用 RenderAuthorize(getAuthority())，如果我當前localStorage存的是antd-pro-authority:["admin"] ，則調用實際是 RenderAuthorize(["admin"])  ，直接導至執行以下函數，返回權限組件components/Authorized/Authorized，其中 CURRENT 返回的是當前權限，也即 ["admin"]

currentAuthority => {
  if (currentAuthority) {
    if (typeof currentAuthority === 'function') {
      CURRENT = currentAuthority();
    }

    if (
      Object.prototype.toString.call(currentAuthority) === '[object String]' ||
      Array.isArray(currentAuthority)
    ) {
      CURRENT = currentAuthority;
    }
  } else {
    CURRENT = 'NULL';
  }

  return Authorized;
};

 

完整如下：renderAuthorize.js

/* eslint-disable eslint-comments/disable-enable-pair */

/* eslint-disable import/no-mutable-exports */
let CURRENT = 'NULL';

/**
 * use  authority or getAuthority
 * @param {string|()=>String} currentAuthority
 */
const renderAuthorize = Authorized => currentAuthority => {
  if (currentAuthority) {
    if (typeof currentAuthority === 'function') {
      CURRENT = currentAuthority();
    }

    if (
      Object.prototype.toString.call(currentAuthority) === '[object String]' ||
      Array.isArray(currentAuthority)
    ) {
      CURRENT = currentAuthority;
    }
  } else {
    CURRENT = 'NULL';
  }

  return Authorized;
};

export { CURRENT };
export default Authorized => renderAuthorize(Authorized);

 

值得注意的是，Authorized是在中間被注入的，components/Authorized/index

import Authorized from './Authorized';
import Secured from './Secured';
import check from './CheckPermissions';
import renderAuthorize from './renderAuthorize';
Authorized.Secured = Secured;
Authorized.check = check;
const RenderAuthorize = renderAuthorize(Authorized);
export default RenderAuthorize;

 

此時問題聚焦到：components/Authorized/Authorized

import React from 'react';
import check from './CheckPermissions';

const Authorized = ({ children, authority, noMatch = null }) => {
  const childrenRender = typeof children === 'undefined' ? null : children;
  const dom = check(authority, childrenRender, noMatch);
  return <>{dom}</>;
};

export default Authorized;

這里使用CheckPermissions對權限作判斷，里面實現了對權限的判斷邏輯，以及在頁面未加載完畢時，控制顯示loading的圖標

 

最后回到pages/Authorized上

 return (
    <Authorized
      authority={getRouteAuthority(location.pathname, routes) || ''}
      noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
    >
      {children}
    </Authorized>
  );

修改后

  <Authorized
        authority={getRouteAuthority(location.pathname, routes) || ''}
        //  noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to={`/login?${getPageQuery()}`} />}
        currentAuthority={currentAuthority}
        noMatch={<Redirect to="/exception/403" />}
      >
        {children}
      </Authorized>

 

authority傳入的是我們在config中路由配置里預定義的權限，noMatch傳入的是當鑒權不通過時，應該怎么做，這里加了判斷登錄，若權限不通過，未登錄的立即跳登錄，否則即顯示權限禁止頁，這是適用菜單切換的鑒權，不過，調用登錄接口，執行登錄邏輯不適合在此做。因為，在layouts/SecurityLayout做登錄邏輯更適合，它也是先於其他組件加載的。

我的做法是，讓pages/Authorized只判斷權限跳403，登錄的鑒權交給layouts/SecurityLayout做，這時還不夠，還需要修改check的CURRENT的值為在pages/Authorized傳入，因為我發現，鑒權組件一開始就會被加載，因此被注入的權限CURRENT不是最新的，所以現在改為實時傳入

 

2020年3月26日：該文章部分內容已過時，請關注 官方發布