Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
ant-design-pro
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
安博
ant-design-pro
Commits
f5c5693b
Commit
f5c5693b
authored
Jun 05, 2018
by
安博
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update readme.md
parent
9fcdb500
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
104 additions
and
1 deletion
+104
-1
README.md
README.md
+104
-1
No files found.
README.md
View file @
f5c5693b
...
...
@@ -866,7 +866,7 @@ app.use("/api",proxyMiddleWare(proxyOption)) //对api请求使用代理
```
前端服务器代理的好处是对于用户而言只能看到前端服务器的地址,后端服务器的安全性得到提高;同时代理发生在内网环境,速度快。
第6章
跨页面数据存储与session
第6章
session与权限控制
==========
6.
1 跨页面数据存储
...
...
@@ -910,4 +910,107 @@ cookie可以设置过期方式与过期时间字段。
6.
3 ant框架中的权限控制
------
###6.3.1 权限类型
框架默认的权限类型包括三种:
`admin`
`user`
`guest`
来源代码段:
`/.roadhogrc.mock.js`
```
'POST /api/login/account': (req, res) => {
const { password, userName, type } = req.body;
if (password === '888888' && userName === 'admin') {
res.send({
status: 'ok',
type,
currentAuthority: 'admin',
});
return;
}
if (password === '123456' && userName === 'user') {
res.send({
status: 'ok',
type,
currentAuthority: 'user',
});
return;
}
res.send({
status: 'error',
type,
currentAuthority: 'guest',
});
},
```
###6.3.2 登录登出
model文件夹下有一个
`login.js`
,其中引入了api中的
`fakeAccountLogin`
,它调用的API就是上述代码段。
```
import { routerRedux } from 'dva/router';
import { fakeAccountLogin } from '../services/api';
import { setAuthority } from '../utils/authority';
import { reloadAuthorized } from '../utils/Authorized';
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// Login successfully
if (response.status === 'ok') {
reloadAuthorized();
yield put(routerRedux.push('/'));
}
}
```
其中的login方法即账户登陆,它向上述API发起了一个请求,请求的body可以参照mock中的代码段,包括
`userName`
`password`
`type`
三个字段,type字段的意义不明。返回的数据里
`currentAuthority`
字段即为权限。
收到返回数据后,进行两件事情,首先是调用put方法将返回数据传给reduce中的
`changeLoginStatus`
:
```
changeLoginStatus(state, { payload }) {
setAuthority(payload.currentAuthority);
return {
...state,
status: payload.status,
type: payload.type,
};
}
```
`setAuthority`
是用于设置当前权限值的,定位到代码可以看到权限值被存放在了
`localStorage`
中。这里localStorage被当作了session来使用。
```
export function getAuthority() {
return localStorage.getItem('antd-pro-authority') || 'admin';
}
export function setAuthority(authority) {
return localStorage.setItem('antd-pro-authority', authority);
}
```
其次是
`reloadAuthorized`
,这个方法会刷新当前页面中的权限,它指向的方法最终落到
`components`
中的
`Authorized`
组件,其中的index.js中的方法:
```
const renderAuthorize = currentAuthority => {
if (currentAuthority) {
if (currentAuthority.constructor.name === 'Function') {
CURRENT = currentAuthority();
}
if (currentAuthority.constructor.name === 'String') {
CURRENT = currentAuthority;
}
} else {
CURRENT = 'NULL';
}
return Authorized;
};
```
刷新权限后,通过
`routerRedux.push('/')`
跳转页面到首页。
类似的,
`login.js`
中的
`logout`
方法会刷新权限为
`guest`
,然后跳转到登录页。
###6.3.3 页面访问控制
页面权限检查的功能实现在
`Authorized`
组件中
```
render() {
const { children, authority, noMatch = null } = this.props;
const childrenRender = typeof children === 'undefined' ? null : children;
return CheckPermissions(authority, childrenRender, noMatch);
}
```
它调用了
`CheckPermissions`
检查权限,其定义在
`checkPermissions.js`
中,返回授权不通过的页面或者抛出一个错误。判定标准是菜单中设定的权限和上面API返回的权限是否严格相等。
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment