Easy to handle react component permission.
npm install @easytool/react-permission
npm install -S @easytool/react-permission
`
Usage
`jsx
import Permission from '@easytool/react-permission';
import React from 'react';
import { render } from 'react-dom';
render(
1
1, 2
1, 2, 3
4
,
document.getElementById('app')
);
`
$3
`jsx
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3]);
}, 3000);
});
render(
1
2
3
,
document.getElementById('app')
);
`
$3
`jsx
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3]);
}, 3000);
});
render(
Loading...
$3
Change denied element.
`jsx
render(
React.cloneElement(el, { style: { color: 'red' } })}>
1
2
,
document.getElementById('app')
);
`
Replace denied element.
`jsx
render(
Permission denied}>
1
2
,
document.getElementById('app')
);
`
Handle deny to specific element.
`jsx
render(
// DOM Elements can not use 'onxxx' custom attributes, so use 'deny' in place of it.
Permission denied}>1
Not Allow}>2
,
document.getElementById('app')
);
`
$3
Set global Permission.
`jsx
import Permission, { PermissionContext } from '@easytool/react-permission';
render(
1
2
3
,
document.getElementById('app')
);
`
Asynchronous setting permission.
`jsx
import Permission, { PermissionContext } from '@easytool/react-permission';
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3]);
}, 3000);
});
render(
Permission denied }}>
1
2
3
,
document.getElementById('app')
);
`
Updating permission from a nested component.
`jsx
class Home extends React.Component {
static contextType = PermissionContext;
componentDidMount() {
setTimeout(() => {
this.context.togglePermission([1, 2, 3]);
}, 2000);
}
render() {
return (
Home
permission 2
permission 3
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
hasPermission: [1, 2],
togglePermission: (permissions) => {
this.setState({
hasPermission: permissions
});
}
};
}
render() {
return (
);
}
}
render(
document.getElementById('app')
);
`
$3
react-router@4-5
`jsx
import Permission, { PermissionContext } from '@easytool/react-permission';
function Deny() {
return Permission denied
;
}
let res, rej;
const context = {
hasPermission: new Promise((resolve, reject) => {
res = resolve;
rej = reject;
}),
onDeny: (el, index) => React.cloneElement(el, { component: Deny })
};
class App extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// request permission
setTimeout(() => {
res([1, 2]);
}, 2000);
}
render() {
return (
{/ using global setting /}
{/ this route will be denied /}
);
}
}
render(
document.getElementById('app')
);
`
react-router@3
`jsx
function Deny() {
return Permission denied
;
}
render(
React.cloneElement(el, { key: index, component: Deny })}>
,
document.getElementById('app')
);
`
onLoad props is required when use Promise for react-router@3.
`jsx
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2]);
}, 3000);
});
render(
Loading...}>
,
document.getElementById('app')
);
`
$3
`jsx
import { Table } from 'antd';
import Permission, { PermissionContext } from '@easytool/react-permission';
var dataSource = [{
key: '1',
permission: 1,
name: 'Stephen'
}, {
key: '2',
permission: 2,
name: 'Ricky'
}, {
key: '3',
permission: 3,
name: 'Ray'
}];
render(
dataIndex="name"
key="name"
render={(text, record, index) => {
return (
Permission denied}>
{text}
);
}}
/>
,
document.getElementById('app')
);
``