README
Ant-Design-Pro Authorized Lite
extracted and streamline from ant-design-pro
抽离自ant-design-pro
的权限模块
Props
Array<String>
currentAuthority - static permissions allowedArray<String>|String|Promise
authority - dynamic permissionsReactNode
noMatch - the component will show when not allowedReactNode
spinner - show it during promise doingReactNode
Exception - invalid parameter or promise rejectedReactNode
target - passed componentBoolean
forceUpdate - re-render target and Exception each time
Usage
import renderAuthorize from "ant-design-pro-authorized-lite/renderAuthorize";
const CustomAuthorized = (props) =>
{
return renderAuthorize( <permissions allowed>:Array<String> )(props);
};
<CustomAuthorized authority={ <permissions>:Array<String> } />
Async Verification
import {Authorized} from "ant-design-pro-authorized-lite";
<Authorized authority={new Promise((resolve) =>
{
setTimeout(() =>
{
resolve();
}, 3000);
})}>
<Button>ASYNC</Button>
</Authorized>
AuthorizedRoute Imitation
with react-router 4.x
import {withRouter} from "react-router-dom";
const RouteAuthorize = withRouter(({history, redirect}) =>
{
useEffect(() =>
{
history.replace(redirect);
}, [redirect, history]);
return null;
});
<CustomAuthorized authority={...} noMatch={<RouteAuthorize redirect="/a"/>}>
<RouteAuthorize redirect="/b"/>
</CustomAuthorized>
<Switch>
<Route path="/a" component={SignInPage}/>
<Route path="/b" component={LogoutPage}/>
</Switch>
Force Update
import React from "react"
import {Authorized} from "ant-design-pro-authorized-lite";
class ForceUpdateComponent extends React.Component {
state = {
time: Date.now().toString()
}
render() {
const { time } = this.state;
return (
<div>current time : {time}</div>
);
}
}
class extends React.Component {
state = {
current: ""
};
toggleAuthority = () => {
this.setState({ current: this.state.current === "test" ? "" : "test" });
};
render() {
const {current}=this.state;
const content = <ForceUpdateComponent />;
return (
<div>
<Authorized forceUpdate noMatch={content} authority={["test"]} currentAuthority={current}>
{content}
</Authorized>
<button onClick={toggleAuthority}>re-render</button>
</div>
);
}
}