1. 注冊(cè)model
在引入新頁(yè)面時(shí)，新建model需要注冊(cè)，這個(gè)時(shí)候需要在commen中的router頁(yè)面進(jìn)行注冊(cè)，否則無法使用dispatch進(jìn)行后續(xù)操作。
2.在ant-design-pro中解決跨域辦法
需要在配置文件中(.webpackrc)加入如下代碼
"proxy": {
"/api": {
"target": "http://xxx:xx/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},
需要注意的是此處不是將/api/代理到正式請(qǐng)求/api/中，（例如請(qǐng)求/api/users則會(huì)代理到http://xxx:xx/users）
如果需要多次代理且需要代理到不同的服務(wù)器則可以在配置文件中進(jìn)行如下配置
"proxy": {
"/test": {
"target": "http://xxx:xx/",
"changeOrigin": true,
"pathRewrite": { "^/test" : "" }
},
"/cross": {
"target": "http://jsonplaceholder.typicode.com",
"changeOrigin": true,
"pathRewrite": {"^/cross": ""}
} // 此處有一點(diǎn)需要注意，不能在最后一個(gè)代理對(duì)象后面加逗號(hào)，否則會(huì)報(bào)錯(cuò)！！！
},
之所以不在pro中使用/api進(jìn)行代理是因?yàn)閜ro中的其他接口是基于此的，所以如果對(duì)其進(jìn)行代理會(huì)導(dǎo)致頁(yè)面報(bào)錯(cuò)從而有可能誤導(dǎo)開發(fā)人員。
3.權(quán)限控制
在pro里面權(quán)限控制是通過Authorized來進(jìn)行控制的，通過對(duì)本地存儲(chǔ)的antd-pro-authority的值進(jìn)行判斷，在登陸時(shí)進(jìn)行權(quán)限的刷新，所以要將權(quán)限控制精細(xì)到頁(yè)面元素級(jí)別的話需要通過對(duì)獲取到的值進(jìn)行判斷，在實(shí)際項(xiàng)目開發(fā)過程中，有可能該值不會(huì)存儲(chǔ)在本地而是通過服務(wù)獲取到，以此來提高安全性。
在pro中控制權(quán)限是通過角色來進(jìn)行控制的，不同的角色擁有不同的權(quán)限，在src/router中來對(duì)角色進(jìn)行權(quán)限的判定。例如登陸頁(yè)面是guest，而內(nèi)容頁(yè)面則是admin和user。新增角色也是在此處進(jìn)行添加。
將權(quán)限控制精細(xì)到按鈕級(jí)別，示例代碼如下
import RenderAuthorized from 'ant-design-pro/lib/Authorized';
import { Alert } from 'antd';
const Authorized = RenderAuthorized('user');
const noMatch = <Alert message="No permission." type="error" showIcon />;
ReactDOM.render(
<Authorized authority={['user', 'admin']} noMatch={noMatch}>
<Alert message="Use Array as a parameter passed!" type="success" showIcon />
</Authorized>,
mountNode,
);
需注意的是引入的是組件而不是工具類里的Authorized，兩者用法不同。
4. 在model中怎么同時(shí)發(fā)起多次請(qǐng)求，因?yàn)閥ield將異步請(qǐng)求轉(zhuǎn)為同步請(qǐng)求了，所以請(qǐng)求會(huì)按照同步順序依次執(zhí)行，使請(qǐng)求時(shí)間延長(zhǎng)
錯(cuò)誤寫法
// effects將按順序執(zhí)行
const response = yield call(fetch, '/users');
const res = yield call(fetch, '/roles');
正確寫法
// effects將會(huì)同步執(zhí)行
const [response, res] = yield [
call(fetch, '/users'),
call(fetch, '/roles'),
]
