Ant Design Pro 鑑權許可權管理

ant-design-pro 1.0.0 v4

最近需要專案需要用掃碼登入，因此就使用antd pro提供的鑑權能力來做

authorized.ts

提供初始化路由元件和過載路由的函式

import renderauthorize from '@/components/authorized';
import  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 =>;
export ;
export 
default authorized;

這裡呼叫 renderauthorize(getauthority())，如果我當前localstorage存的是antd-pro-authority:["admin"] ，則呼叫實際是 renderauthorize(["admin"]) ，直接導至執行以下函式，返回許可權元件components/authorized/authorized，其中 current 返回的是當前許可權，也即 ["admin"]

currentauthority =>
if(object.prototype.tostring.call(currentauthority) === '[object string]' ||array.isarray(currentauthority)
) } 
else
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  currentauthority */
const renderauthorize = authorized => currentauthority =>
if(object.prototype.tostring.call(currentauthority) === '[object string]' ||array.isarray(currentauthority)
) } 
else
return
authorized;
};export ;
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 = () =>;
};export 
default authorized;

這裡使用checkpermissions對許可權作判斷，裡面實現了對許可權的判斷邏輯，以及在頁面未載入完畢時，控制顯示loading的圖示

最後回到pages/authorized上

return
(    
authority=
nomatch=
>
);

修改後


authority=
//nomatch=
currentauthority=
nomatch={}
>

authority傳入的是我們在config中路由配置裡預定義的許可權，nomatch傳入的是當鑑權不通過時，應該怎麼做，這裡加了判斷登入，若許可權不通過，未登入的立即跳登入，否則即顯示許可權禁止頁，這是適用選單切換的鑑權，不過，呼叫登入介面，執行登入邏輯不適合在此做。因為，在layouts/securitylayout做登入邏輯更適合，它也是先於其他元件載入的。我的做法是，讓pages/authorized只判斷許可權跳403，登入的鑑權交給layouts/securitylayout做，這時還不夠，還需要修改check的current的值為在pages/authorized傳入，因為我發現，鑑權元件一開始就會被載入，因此被注入的許可權current不是最新的，所以現在改為實時傳入

其實這篇文章寫得不好，看起來很繞，並且ant 團隊對這個版本鑑權**其實饒了遠路，只做對了一件事，就是：不論進入哪個頁面，只要鑑權不通過均會被跳到登入頁。官方在新版本已經意識到這個問題，並且已經簡化了，我的文章不再有參考價值

Ant Design Pro 鑑權許可權管理

基於cookie的簡單鑑權與JWT鑑權

Asterisk鑑權演算法

Vue路由鑑權

Ant Design Pro 鑑權 許可權管理

基於cookie的簡單鑑權與JWT鑑權

Asterisk鑑權演算法

Vue路由鑑權

相關推薦

Ant Design Pro 鑑權許可權管理