1.0.0 • Published 4 years ago
flow-ui-auth v1.0.0
react-auth
v1.0.0
安装
npm install @terminus/react-auth --save
使用方法
AuthProvider
最外层容器
参数:
value(object) : { auth: [], // 当前拥有权限 allAuth: [], // 所有权限集合 strict: false, // 严格模式,默认 false }
- 严格模式下当前资源必要在 auth 中才会显示
- 非严格模式下当前资源在 auth 中或不在 allAuth 中即可显示
AuthConsumer
权限点容器
参数:
- name(string): 资源点标识
静态方法:
- True:用于包裹匹配权限点的内容
- False:用于包裹未匹配权限点时的内容
AuthWrapper
HOC
,向组件内传入参数authList
,可以配合hasAuth
方法,实现非JSX的逻辑flatten
用于解析传入资源文件,返回资源点集合
const { apis, operations } = flatten(resoucres: Array)
- apis: api类型的资源点
- operations: 其他资源点
hasAuth
权限判断逻辑,需要传入资源集合和当前权限点,支持传入扩展逻辑判断方法,可单独使用
hasAuth(list: Array, name: String[, onAuth: Function]) return Boolean
例子
资源文件
module.exports = () => ({
productKey: 'cp-source',
productName: '供应链寻源招投标',
description: '供应链寻源招投标(包含招标、竞价、询价、答疑、保证金、标管理)',
resources: [
{
type: 'menu',
name: '寻源管理',
permissions: [],
data: {
icon: 'xunyuanguanli',
},
children: [
{
name: '招标管理',
permissions: [],
type: 'menu',
data: {
link: '/bid/list',
},
key: 'bid-manage',
title: 'dashboard.sider.bidManage',
description: '招标管理',
children: [
{
name: '查看标详情',
type: 'operation',
key: 'bid.list.detail'
}
]
},
{
name: '询价管理',
permissions: [],
type: 'menu',
data: {
link: '/inquiry/list',
},
key: 'inquiry-manage',
title: 'dashboard.sider.inquiryManage',
description: '询价管理',
},
],
key: 'source-manage',
title: 'dashboard.sider.sourceManage',
description: '寻源管理',
},
],
})
Provider
import React from 'react'
import { AuthProvider, flatten } from '@terminus/react-auth'
import resources from 'files/auth'
class App extends React.Component {
render () {
return (
<AuthProvider value={flatten(resources)}>
...
</AuthProvider>
)
}
}
Consumer
import React from 'react'
import { AuthConsumer } from '@terminus/react-auth'
// 单独使用
class Component extends React.Component {
render () {
return (
<AuthConsumer name="bid.list.detail">
... // 有权限时
</AuthConsumer>
)
}
}
// 配合 True, False
const { True, False } = AuthConsumer
class Component extends React.Component {
render () {
return (
<AuthConsumer name="bid.list.detail">
<True>
... // 有权限时
</True>
<False>
... // 无权限时
</False>
</AuthConsumer>
)
}
}
AuthWrapper
import React from 'react'
import { AuthWrapper, hasAuth } from '@terminus/react-auth'
import { Input } from 'antd'
@AuthWrapper
class Component extends React.Component {
render () {
return (
<Input
disable={hasAuth(this.props.authList, 'bid.setup.edit')}
/>
)
}
}
1.0.0
4 years ago