maycur-business/lib/Authorize/README.md

maycur business react components of web

### Authorize

> 功能屏蔽组件
> 代码维护者: 余旋

#### 使用前须知

参考：[语雀Authorize文档](https://maycur.yuque.com/maycur-dd-tech/flcd06/qco1n5)

#### 如何使用？

##### 代码演示

1. React组件中使用

```jsx static
import { Authorize } from 'maycur-business'; 
const Auth=Authorize.Auth;
// authKey是从配置文件中取状态的key值
function(){

    return (
        <Auth authKey="demo.test">
            <span>我有时不可见</span>
        </Auth>
    )

}

``` 
Auth组件Api:

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| authKey | 对应于配置文件的唯一值，需自己配置 | String | null | -

2.配置文件的加载与使用
配置文件都维护于各个项目，不在maycur-business中。

* 一个配置文件应该长什么样？

_defaultHide 参数决定该配置文件是以默认显示，还是默认隐藏为前提。确定前提后，可配置每个authKey的显示/隐藏，值得一提的是disable状态的组件会被注入 `auth-disable` 的类名。

```js static
// 示例：configure.js
let status = getStatus();

function demoConfig() {
    let show = status.show;
    let hide = status.hide;
    let disable = status.disable;

    return {
        _defaultHide: false,
        demo: {
            test: show
        }
    }
}

export default demoConfig;
```
getStatus方法接收一个参数来区分套上&lt;Auth /&gt;的组件是默认显示还是隐藏，如果默认显示则主要由hide字段控制隐藏，如果默认隐藏则主要由show字段控制显示，因此状态由以下专门的方法输出。

```js static
function getStatus(defaultHide) {

    if (defaultHide) {
        return {
            show: { show: true },
            hide: { show: false },
            disable: { show: true, disable: true}
        }
    } else {
        return {
            show: { hide: false },
            hide: { hide: true },
            disable: { hide: false, disable: true}
        }
    }

}

``` 

* 如何使用配置文件？

使用配置文件由两步：A.加载文件。B.切换至该文件。支撑这两步的方法由withAuth注入。withAuth是一个高阶组件，可给被包裹的组件注入当前的配置文件信息对象，切换配置文件的方法等，具体如下：

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| configure | 当前使用的配置文件的对象 | Object | {} | -
| setConfigure | 更改配置文件的某字段，如：setConfigure({ demo: { test: show } }) | Function | Function(obj) | -
| initVersion | 初始化某版本，接收版本的字符串 | Function | Function(version:String) | -
| switchVersion | 切换至某版本，接收版本的字符串 | Function | Function(version:String) | -
| addVersion | 增加某版本 | Function | Function({[version]: demoConfig}) | -
| wrappedComponentRef | 获取被包裹组件的ref | Function \| React.createRef() | null | -

```jsx static
// 示例：App.js
import React, { Component } from 'react';
import { Authorize } from 'maycur-business';
import demoConfig from 'configure/demo';

class App extends Component {
    componentDidMount() {
        // 1.加载版本配置文件
        this.props.addVersion({
            "version1": demoConfig()
        });
        // 2.使用版本配置文件
        this.props.initVersion("version1");
    }
    render(){
        return <div></div>
    }
}

export default Authorize.withAuth(App);
```