Auth Wrapper

Usage

import AuthWrapper from '@ygyg/react-authwrapper';
import React from 'react';
import ReactDOM from 'react-dom';

function myValid(code) {
  console.log(code);
  const codes = ['123', '456'];
  const hasAuth = !!code && code.length > 0 ? codes.includes(code) : true;
  return hasAuth;
}

function getCodes() {
  return ['123', '456'];
}

function Exception403() {
  return 'forbidden';
}

ReactDOM.render(
  <React.Fragment>
    <AuthWrapper code="123" codes={['123', '456', '678']}>
      <div>This is React Nodes as Children</div>
    </AuthWrapper>
    <AuthWrapper code="1234" codes={['123', '456']}>
      <div>No Auth</div>
    </AuthWrapper>

    <AuthWrapper code="1234" codes={['123', '456']} noMatch={<Exception403 />}>
      <div>No Auth forbidden exception</div>
    </AuthWrapper>

    <AuthWrapper code="1234" codes={getCodes()}>
      <div>No Auth1</div>
    </AuthWrapper>

    <AuthWrapper code="123" codes="123">
      <div>codes is string ---- ok</div>
    </AuthWrapper>

    <AuthWrapper code={['123', 'aaa456']} codes={['123', '456', '678']}>
      <div>code and codes is array</div>
    </AuthWrapper>

    <AuthWrapper code="1234" valid={myValid}>
      <div>No Auth function</div>
    </AuthWrapper>

    <AuthWrapper code="1234" valid={myValid}>
      <div>No Auth function And Codes</div>
    </AuthWrapper>

    <AuthWrapper code="">
      <div>Allow empty ---- ok</div>
    </AuthWrapper>

    <AuthWrapper>
      <div>undefined waring ---- ok</div>
    </AuthWrapper>
  </React.Fragment>
  , container
);

install

API

| 成员 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | code | 权限码 | string 或 array | 必传，可为空 | | codes | 权限码的合集 | string 或 array | | | chilren | 子组件 | () => HTMLElement | 必传 | | noMatch | 无权限，需显示的组件 | 子组件 | () => HTMLElement | 无 | | valid | 校验函数 | () => {} 返回bool| 无 |

Development

npm install
npm run dev

Example

http://localhost:3000/

Coverage

npm run coverage

open coverage/ dir

License

react authwrapper is released under the MIT license.