Authorized功能介绍

通过对当前用户所匹配的现有权限（currentAuthority）和组件所需要对应的准入权限（authority）进行判断，如果两者匹配成功，则返回权限匹配成功的组件，否则返回权限匹配错误的组件。

Authorized文件目录

Authorized目录下有七个文件分别是：

我认为Authorized组件，除了在当前目录下进行的鉴权逻辑之外，还有一部分是现在其他地方实现的存取权限的逻辑，合起来组合成了整个鉴权系统。
分为两部分：

鉴权比较
获取权限

鉴权比较

主要代码在CheckPermissions.tsx中，逻辑比较简单，比较authorized在不同类型下处理情况。

/*** 通用权限检查方法* Common check permissions method* @param { 权限判定 | Permission judgment } authority* @param { 你的权限 | Your permission description } currentAuthority* @param { 通过的组件 | Passing components } target* @param { 未通过的组件 | no pass components } Exception*/
const checkPermissions = <T, K>(authority: IAuthorityType,currentAuthority: string | string[],target: T,Exception: K,
): T | K | React.ReactNode => {// 没有判定权限.默认查看所有// Retirement authority, return target;if (!authority) {return target;}// 数组处理if (Array.isArray(authority)) {if (Array.isArray(currentAuthority)) {if (currentAuthority.some((item) => authority.includes(item))) {return target;}} else if (authority.includes(currentAuthority)) {return target;}return Exception;}// string 处理if (typeof authority === 'string') {if (Array.isArray(currentAuthority)) {if (currentAuthority.some((item) => authority === item)) {return target;}} else if (authority === currentAuthority) {return target;}return Exception;}// Promise 处理if (authority instanceof Promise) {return <PromiseRender<T, K> ok={target} error={Exception} promise={authority} />;}// Function 处理if (typeof authority === 'function') {const bool = authority(currentAuthority);// 函数执行后返回值是 Promiseif (bool instanceof Promise) {return <PromiseRender<T, K> ok={target} error={Exception} promise={bool} />;}if (bool) {return target;}return Exception;}throw new Error('unsupported parameters');
};

获取权限

获取权限需要分别获取：

用户权限
组件的准入权限

用户权限

在ant design pro中用户权限是通过登录之后，在登录成功的回调中通过调用setAuthority进行保存到localStorage中。在通过getAuthority获取。并在utils文件夹下的Authorized.ts中当作参数调用，并写入到变量CURRENT中，并导出方便其他模块调用。

setAuthority:

export function setAuthority(authority:string | string[]): void {//还未有登录接口，临时设置默认为adminconst proAuthority = typeof authority === 'string' ? [authority] : authority;localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));// auto reloadreloadAuthorized();
}

getAuthority

export function getAuthority(str?: string): string | string[] {const authorityString =typeof str === 'undefined' && localStorage ? localStorage.getItem('antd-pro-authority') : str;// authorityString could be admin, "admin", ["admin"]let authority;try {if (authorityString) {authority = JSON.parse(authorityString);}} catch (e) {authority = authorityString;}if (typeof authority === 'string') {return [authority];}return authority;
}

调用getAuthority:

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());
};

RenderAuthorize中写入CURRENT:

let CURRENT: string | string[] = 'NULL';type CurrentAuthorityType = string | string[] | (() => typeof CURRENT);
/*** use  authority or getAuthority* @param {string|()=>String} currentAuthority*/
const renderAuthorize = <T>(Authorized: T): ((currentAuthority: CurrentAuthorityType) => T) => (currentAuthority: CurrentAuthorityType,
): T => {if (currentAuthority) {if (typeof currentAuthority === 'function') {CURRENT = currentAuthority();}if (Object.prototype.toString.call(currentAuthority) === '[object String]' ||Array.isArray(currentAuthority)) {CURRENT = currentAuthority as string[];}} else {CURRENT = 'NULL';}return Authorized;
};export { CURRENT };
export default <T>(Authorized: T) => renderAuthorize<T>(Authorized);

实际项目中，用户权限通常是在登录后返回的用户信息中包含，建议使用localStorage中保存，取得时候也方便存取。

localStorage.setItem(key, value)
localStorage.sgetItem(key)

获取组件权限

ant design pro采用的是umi框架，可以在路由中配置权限，如：

export default [{path: '/',component: '../layouts/BlankLayout',authority: ['admin', 'user'], // 设置准入权限routes: [{name: 'login',path: '/user/login',authority: ['user'], // 设置准入权限component: './user/login',}]}

只需要获取在路由中配置的权限信息即可。

    // get children authorityconst authorized = useMemo(() =>getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {authority: undefined,},[location.pathname],);

使用实例

最好在使用中只需要传入3个参数：

authority：准入权限；
noMatch：鉴权失败显示组件;
chlidren：鉴权成功显示组件；

<Authorized authority={authorized!.authority} noMatch={noMatch}>{children}
</Authorized>

用户权限已经存在CURRENT中，Authorized组件内部会自行调用。

checkPermissions<T, K>(authority, CURRENT, target, Exception)

ant design pro中权限组件Authorized的个人学习相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
ant design pro v2 - 权限控制
同步语雀地址:https://www.yuque.com/chenzilong/nigxcx/qtv5n3 github地址:https://github.com/rodchen-king/ant-d ...
Ant Design Pro 项目图表组件点击事件
背景:使用框架配套图表组件charts 要求柱形图可实现点击事件方法:onReady 官网:https://charts.ant.design/zh/docs/api/options/events ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
关于ant design pro中2个下拉列表，下列列表a的数据需要依据列表b选择的值来进行变化，无法及时获取
<ProFormTreeSelectname="permission"label="列表的label"placeholder="选择" ...
Ant Design Pro 中 ProTable受控菜单 class类与构造函数
// class 类 state = {// 列表受控模式columnsStateMap: {btId: { show: false }, // 需要受控的字段名(btId)},};// 在组件中 & ...
Ant Design Vue中a-select组件下拉列表在局部滚动时不跟随问题解决方法
问题如下: 修改方法如下 <a-tree-select:getPopupContainer="triggerNode => {return triggerNode.parent ...
使用ant design vue 中table组件运行时not found: Error: Can't resolve 'reqwest' in 'D:\vue\antd-demo01\src\com
最近使用table时按照官网api使用table报了上面这个错误 1.只需要安装无法找到文件就可以正常运行了 2.命令行cd进入项目文件 3.运行npm install --save reqwest ...
Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...

ant design pro中权限组件Authorized的个人学习