Authorized

Example Usage

import { Authorized } from '@alitajs/antd-plus';

Demo

SyntaxError: No-Inline evaluations must call `render`.

Basic Example

Permission component usage example.

const AuthorizedPlus = (props) => {
  const actions = [
    { module: 'module1', action: 'action1' },
    { module: 'module1', action: 'action2' },
    { module: 'module1', action: 'action3' },
    { module: 'module2', action: 'action1' },
    { module: 'module2', action: 'action2' }
  ];
  const policy = new Policy(actions);
  
  policy.addPolicy({
    version: 1,
    statement: [
      {
        effect: 'allow',
        action: [
          'module1/*'
        ]
      }
    ]
  });
  
  return (
    <Authorized {...props} policy={policy} />
  )
}

const NoAuth = () => {
  return (
    <span style={{ color: '#ff4d4f' }}>no auth</span>  
  )
}

render(
  <div className="authorized-demo">
    <AuthorizedPlus authority="*">
      <Button type="primary">操作1</Button>
    </AuthorizedPlus>
     
    <AuthorizedPlus authority="module1/action1">
      <Button type="primary">操作2</Button>
    </AuthorizedPlus>
    
    <AuthorizedPlus authority="module2/action1" noMatch={<NoAuth />}>
      <Button type="primary">操作3</Button>
    </AuthorizedPlus> 
  </div>
)

SyntaxError: No-Inline evaluations must call `render`.

SyntaxError: No-Inline evaluations must call `render`.

Custom Rendering Logic

Permission component usage example.

const AuthorizedPlus = (props) => {
  const actions = [
    { module: 'module1', action: 'action1' },
    { module: 'module1', action: 'action2' },
    { module: 'module1', action: 'action3' },
    { module: 'module2', action: 'action1' },
    { module: 'module2', action: 'action2' }
  ];
  const policy = new Policy(actions);
  
  policy.addPolicy({
    version: 1,
    statement: [
      {
        effect: 'allow',
        action: [
          'module1/*'
        ]
      }
    ]
  });
  
  return (
    <Authorized {...props} policy={policy} />
  )
}

render(
  <div>
    <AuthorizedPlus authority="*">
      {(isMatch) => (
        <span>权限校验结果: {isMatch + ''}</span>
      )}
    </AuthorizedPlus>
    <br />
    <AuthorizedPlus authority="module2/action1">
      {(isMatch) => (
        <span>权限校验结果: {isMatch + ''}</span>
      )}
    </AuthorizedPlus>
  </div>
)

SyntaxError: No-Inline evaluations must call `render`.

API#

Authorized#

Property	Description	Type	Required	Default	Alternative
policy	权限策略对象	Policy	是	--	--
noMatch	验证未通过展示	React.ReactNode	否	`null`	--
authority	权限	`string`、`string[]`	是	--	--
children	需要控制权限的组件或者自定义渲染的函数	`function`、`React.ReactNode`	否	`null`	--

children为function会将权限结果传递给自定义渲染的函数

(isMatch) => {
  // your code
}