Determine the presentation of related React Components by comparing existing permissions with access permissions.
React Authorize requires React 16.3 or later.
To use React Authorize with your React app:
npm install --save react-authorizeLet's take a look at a simple example.
import React from 'react';
import ReactDOM from 'react-dom';
import {Authorized} from "react-authorize";
const Unauthorized = () => (
<div>Render the current component if it is not authorized</div>
);
ReactDOM.render(
(
<div>
<Authorized
permissions="admin"
authority="admin"
unauthorized={<Unauthorized />}
>Authorize permission to render React Components</Authorized>
</div>
),
document.getElementById('root'),
);When permissions and authority are the same, it means we have permission, so we render the children components; if they are not the same, there is no permission, so the Unauthorized components will be rendered
The component is used to verify the user's permissions to determine if they can view the child content.
permissions: Permissions allowed by the current component.
string | number | symbol, eg:'admin'|1001|Symbol()Array<string | number | symbol>, eg:['admin', 1001, Symbol()]Note: User permissions only need to match an item in the array to pass authorizationPromise, eg:<Authorized permissions={new Promise((resolve, reject) => { setTimeout(() => { if (true) { // Resolved, pass authorization resolve(); } else { // Rejected, unauthorized reject(); } }, 1000); })} >Authorize permission to render React Components</Authorized>
authority => boolean | Promise, eg:- with
boolean<Authorized // Return true, pass authorization permissions={authority => authority === 'user'} authority="admin" >Authorize permission to render React Components</Authorized>
- with
Promise<Authorized permissions={authority => new Promise((resolve, reject) => { setTimeout(() => { if (authority === 'user') { // Resolved, pass authorization resolve(); } else { // Rejected, unauthorized reject(); } }, 1000); })} authority="admin" >Authorize permission to render React Components</Authorized>
- with
authority: User's current permissions.
string | number | symbol, eg:'admin'|1001|Symbol()Array<string | number | symbol>, eg:['admin', 1001, Symbol()]
Note: As long as permissions and authority are intersection, you can pass authorization. eg:
// pass authorization
<Authorized
permissions={['admin', 1001]}
authority="admin" // ['admin']
>Authorize permission to render React Components</Authorized>
<Authorized
permissions={['admin', 1001]}
authority={[1001]}
>Authorize permission to render React Components</Authorized>
<Authorized
permissions="admin" // ['admin']
authority={['admin', 1001]}
>Authorize permission to render React Components</Authorized>
<Authorized
permissions="admin" // ['admin']
authority="admin" // ['admin']
>Authorize permission to render React Components</Authorized>children: Pass authorization rendering components.
React.ReactElement | null, eg:<div>Pass authorization</div>
unauthorized: Components rendered without permission.
React.ReactElement | null, eg:<div>Unauthorized</div>
loading: Rendering loading components when permissions is Promise and the status is pending.
React.ReactElement | null, eg:<div>Loading...</div>
In the example below, we will use React Router and Authorized components at the same time.
import React from 'react';
import ReactDOM from 'react-dom';
import {
Switch,
Route,
Link,
Redirect,
BrowserRouter as Router,
} from 'react-router-dom';
import {Authorized} from "react-authorize";
const NotFound = () => (
<div>404</div>
);
const One = () => <div>This is one</div>;
const Two = () => <div>This is two</div>;
const AuthorizedRoute = ({
component: Component,
render,
permissions,
authority,
redirectPath,
...rest
}) => (
<Authorized
permissions={permissions}
authority={authority}
unauthorized={(
<Route
{...rest}
render={() => <Redirect to={{ pathname: redirectPath }} />}
/>
)}
>
<Route
{...rest}
render={props => Component ? <Component {...props} /> : render(props)}
/>
</Authorized>
);
const App = () => (
<div>
<ul>
<li>
<Link to="/one">The One components does not have permission</Link>
</li>
<li>
<Link to="/two">The Two components have permission</Link>
</li>
</ul>
<div>
<Switch>
<AuthorizedRoute
permissions="admin"
authority="user"
redirectPath="/404"
path="/one"
component={One}
/>
<AuthorizedRoute
permissions="user"
authority="user"
path="/two"
component={Two}
/>
<Route path="/404" component={NotFound} />
</Switch>
</div>
</div>
);
ReactDOM.render(
(
<Router>
<App />
</Router>
),
document.getElementById('root'),
);The secured function allows us to wrap the component in an annotated way and verify that it is authorized.
The secured function receives an object as a parameter, the properties of the object are the same as the props of the Authorized component, but children property are replaced by the wrapped components.
@secured({
permissions,
authority,
unauthorized,
loading,
})
class Children extends React.Components {
render() {
return (
<div>This is test</div>
);
}
}
// or
secured({
permissions,
authority,
unauthorized,
loading,
})(
// This is the children property
() => <div>This is test</div>
);import React from 'react';
import ReactDOM from 'react-dom';
import {secured} from "react-authorize";
const Unauthorized = () => (
<div>Render the current component if it is not authorized</div>
);
@secured({
permissions: 'admin',
authority: 'admin',
unauthorized: <Unauthorized />,
})
class Children extends React.Component {
render() {
return (
<div>Authorize permission to render React Components</div>
);
}
}
ReactDOM.render(
(
<div>
<Children />
</div>
),
document.getElementById('root'),
);The check function is a functional form of Authorized components.
The check function receives an object as a parameter, the properties of the object are the same as the props of the Authorized component.
check({
permissions,
authority,
children,
unauthorized,
loading,
});The return value type of check function is React.ReactElement.
import React from 'react';
import ReactDOM from 'react-dom';
import {check} from "react-authorize";
const Unauthorized = () => (
<div>Render the current component if it is not authorized</div>
);
// Return react element
const component = check({
permissions: 'admin',
authority: 'admin',
unauthorized: <Unauthorized />,
children: <div>Authorize permission to render React Components</div>,
});
ReactDOM.render(
(
<div>
{component}
</div>
),
document.getElementById('root'),
);Sometimes we might want to set some parameters in advance, we can do it with the renderAuthorized function.
The renderAuthorized function receives an object as a parameter, the properties of the object are the same as the props of the Authorized component.
The renderAuthorized function has three return values, which are check, secured and Authorized.
import {renderAuthorized} from "react-authorize";
const {check, secured, Authorized} = renderAuthorized({
permissions: 'admin',
unauthorized: <Unauthorized />,
});Changes are tracked in the CHANGELOG.md.
react-authorize is available under the MIT License.