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')}
      />
    )
  }
}