antd pro 鉴权流程
2021-03-09 16:14:43 0 举报
项目 antd pro 中所用的页面及菜单鉴权流程图
作者其他创作
大纲/内容
src\\utils\\authority.js
check
BasicLayout
Authorized
src\\utils\\utils.js
src\\components\\Authorized\\Secured.jsx
checkPermissions
由 renderAuthorize 高阶函数接受一个 Authorized 对象生成。会在 Authorized 对象上添加 Secured 和 check 属性
PromiseRender
src\\components\\Authorized\\PromiseRender.jsx
设置时重新调用
副作用函数，用于获取当前用户的所有权限，返回对应的权限数组
获取 renderAuthorize
src\\utils\\Authorized.js
Login
authorized
使用 getAuthority 获取权限，并使用 RenderAuthorize 生成 react 组件，全局唯一
登录成功时设置用户权限
antd pro 鉴权流程图在下图中被标黄的函数均为重要函数
使用 getAuthorityFromRouter 获取当前 url 的页面访问权限，并使用 useMemo 缓存
使用 Authorized.check 递归渲染菜单树
返回一个函数用于设置当前用户权限，会一直返回闭包保存的 Authorized
menuDataRender
检查入参对象的原型链，并比较是否为 react 组件或者函数
用于设置 getAuthority 可以读取的权限数据，修改完成后会调用 reloadAuthorized 重新生成当前鉴权组件
这俩实际上是同一个东西
一个组件，props 接受权限，并将自己的 children 和权限一起传递给 check 函数，并渲染 check 返回的组件
重新加载 Authorized
getAuthority
获取 renderAuthorize 生成时调用的 Authorized 组件
CURRENT
reloadAuthorized
getAuthorityFromRouter
ProLayout
isComponentClass
RenderAuthorize
一个 React class 组件，会在 props 传入的 promise 结束进行渲染：reslove 时渲染鉴权成功组件reject 时渲染鉴权失败组件padding 时显示加载动画会在渲染前调用 isComponentClass 将待渲染的对象明确为 react 组件
src\\components\\Authorized\enderAuthorize.js
将接受的权限方式、待渲染组件、鉴权失败时渲染的组件连同当前用户权限（CURRENT ）一起发送给 checkPermissions
Authorized
使用 Authorized 承载页面组件，并使用左边 authorized 获取的当前组件权限进行鉴权判断
通用鉴权流程，抹平不同鉴权范式之间的差异，鉴权方式包括字符串、数组、函数以及 Promise。当遇到 Promise 时会调用 PromiseRender 进行异步渲染
基础框架，整个鉴权系统的入口
setAuthority
src\\components\\Authorized\\CheckPermissions.jsx
renderAuthorize
调用的就是这个 check
src\\layouts\\BasicLayout.jsx
这个权限获取后会被一路保存到这里
src\\components\\Authorized\\Authorized.jsx
当前用户权限，全局唯一
接受路由树和当前的 url 路径，并深度遍历的从路由树中取出访问该页面需要的权限
src\\components\\Authorized\\index.jsx
收藏
收藏
0 条评论
回复 删除
下一页
