前言
权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。
效果:
1、没有准入权限的菜单将不显示
2、直接在浏览器输入没有准入权限的的地址,将跳转到403页面(图1)
![img_ceeb4d318b13b82e5564fd6c8b2b7ac3.png](https://i-blog.csdnimg.cn/blog_migrate/7f2bfb627c068066967a571208c87c2f.png)
个人demo关于权限简介
1、用邮箱自己注册账户(注册后可以登录但是没有任何权限)guest
2、联系管理员分配权限(分配后可以查看有权限的页面)
3、每次登录后获取最新的权限身份(如:admin,user,guest)
实战
Authorized组件是antd-pro的权限组件
Authorized 官方api
在src/router.js
中会发现如下代码
<AuthorizedRoute
path="/"
render={props => <BasicLayout {...props} />}
authority={['admin', 'user', 'guest']}
redirectPath="/user/login"
/>
其中authority
对象就是准入身份的数组,表示只有这些身份的人可以登录,我们在配置的时候一定不要忘记在这更新我们新增的身份
然后就是menu.js
,如下,展示了我们在配置菜单的时候怎么配身份
const menuData = [{
name: '题库管理',
path: 'question',
icon: 'warning',
authority: ['admin', 'user'],
children: [{
name: '题库列表',
path: 'list',
}, {
name: '编辑题目',
path: 'create-question',
hideInMenu: true,
}, {
name: '科目管理'
}]
}, {
name: '账号管理',
icon: 'warning',
path: 'account',
children: [{
name: '账号列表',
path: 'list',
authority: 'admin',
}, {
name: '建设中',
path: '',
authority: ['admin', 'user'],
}]
}]
然后就要说一下登录成功以后怎么获取权限了
effects:{
* login({payload}, {call, put}) {
const response = yield call(login, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// 登录成功以后更新权限,跳转页面
if (response && response.code === '0000') {
reloadAuthorized();
yield put(routerRedux.push('/'));
}
},
},
reducers: {
changeLoginStatus(state, {payload}) {
let _status = "ok";
let _user = "admin";
setToken("token");
setAuthority(_user);//设置权限
return {
...state,
status: _status,
type: 'account',
};
},
}
我们看看setAuthority、reloadAuthorized
这两个方法都做了什么事儿
//设置身份
export function setAuthority(authority) {
return localStorage.setItem('antd-pro-authority', authority);
}
//获取身份
export function getAuthority() {
return localStorage.getItem('antd-pro-authority');
}
如此而且,只是把新的身份值存在localStorage里边,注意getAuthority
,下边会用到
import RenderAuthorized from '../components/Authorized';
import { getAuthority } from './authority';
let Authorized = RenderAuthorized(getAuthority());
const reloadAuthorized = () => {
Authorized = RenderAuthorized(getAuthority());
};
export { reloadAuthorized };
export default Authorized;
RenderAuthorized: (currentAuthority: string | () => string) => Authorized
权限组件默认 export RenderAuthorized 函数,它接收当前权限作为参数,返回一个权限对象,该对象提供以下几种使用方式。
Authorized
最基础的权限控制。
参数 | 说明 | 类型 | 默认值 | |||
---|---|---|---|---|---|---|
children | 正常渲染的元素,权限判断通过时展示 | ReactNode | - | |||
authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean` | - |
noMatch | 权限异常渲染元素,权限判断不通过时展示 | ReactNode | - |
Authorized.AuthorizedRoute
参数 | 说明 | 类型 | 默认值 | |||
---|---|---|---|---|---|---|
authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean` | - |
redirectPath | 权限异常时重定向的页面路由 | string | - |
其余参数与 Route
相同。
Authorized.Secured
注解方式,@Authorized.Secured(authority, error)
参数 | 说明 | 类型 | 默认值 | ||
---|---|---|---|---|---|
authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean` | - |
error | 权限异常时渲染元素 | ReactNode | <Exception type="403" /> |
Authorized.check
函数形式的 Authorized,用于某些不能被 HOC 包裹的组件。 Authorized.check(authority, target, Exception)
注意:传入一个 Promise 时,无论正确还是错误返回的都是一个 ReactClass。
参数 | 说明 | 类型 | 默认值 | ||
---|---|---|---|---|---|
authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean` | - |
target | 权限判断通过时渲染的元素 | ReactNode | - | ||
Exception | 权限异常时渲染元素 | ReactNode | - |
附上管理员分配权限页面
![img_a1afdde0e837491d9e0e381794fadf6c.png](https://i-blog.csdnimg.cn/blog_migrate/52fed33c5266dbc767b64d9da8a3d025.png)