ant design實(shí)現(xiàn)路由權(quán)限認(rèn)證的3個(gè)準(zhǔn)備：

1. 項(xiàng)目中使用了umi3
2. 項(xiàng)目中的src/.umj目錄下有plugin-access,plugin-initial-state,plugin-layout三個(gè)文件夾，一般使用了umi3都會(huì)有這三個(gè)，但是我做的時(shí)候發(fā)現(xiàn)缺了一個(gè)plugin-layout,于是去config.js里配置，代碼如下：

export default {
    layout:{//加上這個(gè)，plugin-layout會(huì)自動(dòng)生成
    },
};

3.下載@ant-design/pro-layout插件，在這里我也遇到一個(gè)坑點(diǎn)，直接按照npm install --save @ant-design/pro-layout的方式下載，umi就運(yùn)行不了，后來(lái)?yè)Q成了npm install --save-dev @ant-design/pro-layout才可以運(yùn)行，沒(méi)太懂是什么原因，如果以后搞清楚了就回來(lái)補(bǔ)充

這3個(gè)都有了以后就可以開(kāi)始路由權(quán)限認(rèn)證了

1. 首先在src下建一個(gè)app.ts文件，該文件和plugin-initial-state(上面已經(jīng)準(zhǔn)備好的）配合來(lái)獲得全局初始化數(shù)據(jù)，app.ts內(nèi)容大致如下：

export async function getInitialState() {
 const data=xxx;//data是你獲取的要用于判斷權(quán)限的數(shù)據(jù)，根據(jù)項(xiàng)目來(lái)調(diào)整，只要最后函數(shù)返回的是數(shù)據(jù)就可以
  return data;
}

2. 在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是自定義的名稱(chēng)，后面一定要是函數(shù)，函數(shù)返回true說(shuō)明有權(quán)限，false沒(méi)有權(quán)限
    };
}

3. 在需要判斷的路由處加上access:'admin',大致如下:

{
        path: 'xxx',
        component: 'xxx',
        hideInMenu: true,
        access:'admin'//加權(quán)限
},

4.由于用了pro-layout后會(huì)生成一個(gè)側(cè)邊欄，而我的項(xiàng)目本來(lái)就有側(cè)邊欄菜單，所以在不想改變我原來(lái)菜單部分代碼的情況下，我在config.js的layout里加上了隱藏菜單欄，內(nèi)容如下:

export default {
    layout:{
        menuRender:false,
        menuHeaderRender: false,
        headerRender:false,
    },
};

偷了個(gè)懶。。。
雖然pro-layout插件就是用來(lái)簡(jiǎn)化生成菜單的，但是我本來(lái)已經(jīng)有菜單布局，不太想改，我只想用插件里的路由權(quán)限認(rèn)證功能。但這樣還是感覺(jué)有點(diǎn)怪怪的，有點(diǎn)累贅的感覺(jué)。有條件的還是改一下吧。不過(guò)感覺(jué)這得涉及另一方面內(nèi)容了，之前照著官網(wǎng)弄半天沒(méi)成功，不知道哪里出了問(wèn)題