ant design實(shí)現(xiàn)路由權(quán)限認(rèn)證的3個(gè)準(zhǔn)備：
- 項(xiàng)目中使用了umi3
- 項(xiàng)目中的src/.umj目錄下有plugin-access,plugin-initial-state,plugin-layout三個(gè)文件夾，一般使用了umi3都會有這三個(gè)，但是我做的時(shí)候發(fā)現(xiàn)缺了一個(gè)plugin-layout,于是去config.js里配置，代碼如下：
export default {
layout:{//加上這個(gè)体捏，plugin-layout會自動生成
},
};
3.下載@ant-design/pro-layout插件梦谜，在這里我也遇到一個(gè)坑點(diǎn)哪廓，直接按照npm install --save @ant-design/pro-layout的方式下載违柏，umi就運(yùn)行不了，后來換成了npm install --save-dev @ant-design/pro-layout才可以運(yùn)行木西，沒太懂是什么原因，如果以后搞清楚了就回來補(bǔ)充
這3個(gè)都有了以后就可以開始路由權(quán)限認(rèn)證了
- 首先在src下建一個(gè)app.ts文件扣癣，該文件和plugin-initial-state(上面已經(jīng)準(zhǔn)備好的）配合來獲得全局初始化數(shù)據(jù)寝志，app.ts內(nèi)容大致如下：
export async function getInitialState() {
const data=xxx;//data是你獲取的要用于判斷權(quán)限的數(shù)據(jù)馍惹，根據(jù)項(xiàng)目來調(diào)整，只要最后函數(shù)返回的是數(shù)據(jù)就可以
return data;
}
- 在src下建一個(gè)access.ts文件恋捆，該文件與plugin-access配合進(jìn)行路由權(quán)限認(rèn)證，內(nèi)容大致如下:
// src/access.ts
export default function (initialState) {
const hasAccess= initialState;//intialState就是app.ts里函數(shù)返回的數(shù)據(jù),在這里我假設(shè)返回的是true或false
return {
admin: ()=>hasAccess;//admin是自定義的名稱重绷，后面一定要是函數(shù)沸停，函數(shù)返回true說明有權(quán)限，false沒有權(quán)限
};
}
- 在需要判斷的路由處加上access:'admin',大致如下:
{
path: 'xxx',
component: 'xxx',
hideInMenu: true,
access:'admin'//加權(quán)限
},
4.由于用了pro-layout后會生成一個(gè)側(cè)邊欄昭卓，而我的項(xiàng)目本來就有側(cè)邊欄菜單愤钾，所以在不想改變我原來菜單部分代碼的情況下瘟滨，我在config.js的layout里加上了隱藏菜單欄，內(nèi)容如下:
export default {
layout:{
menuRender:false,
menuHeaderRender: false,
headerRender:false,
},
};
偷了個(gè)懶能颁。杂瘸。。
雖然pro-layout插件就是用來簡化生成菜單的劲装，但是我本來已經(jīng)有菜單布局胧沫，不太想改，我只想用插件里的路由權(quán)限認(rèn)證功能占业。但這樣還是感覺有點(diǎn)怪怪的绒怨，有點(diǎn)累贅的感覺。有條件的還是改一下吧谦疾。不過感覺這得涉及另一方面內(nèi)容了南蹂，之前照著官網(wǎng)弄半天沒成功，不知道哪里出了問題
