權(quán)限配置過程
- src/app.tsx的代碼會先執(zhí)行
首先在app.tsx文件中導(dǎo)出 getInitialState 方法(可以加async)
就開啟了@umijs/piugin-initial-state插件集
它的返回值是一個(gè)對象
export const getInitialState = async () => {
console.log("getInitialState");
return {
role: "",
}
}
添加本地存儲后
export const getInitialState = async () => {
// console.log("getInitialState");
try {
const userInfo = JSON.parse(localStorage.getItem("userInfo"))
return userInfo || {
role: ""
};
} catch (error) {
console.log(error);
return {
role: ""
}
}
}
- 在執(zhí)行src/access.ts
默認(rèn)拋出一個(gè)函數(shù)减宣，它接收到的參數(shù)是app.tsx中方法的返回值
return {變量：布爾值}
export default function (initialState) {
console.log(initialState);
// 例如
return {
canUser: role === "admin"
}
}
回到路由文件router.ts給需要控制視圖權(quán)限的路由添加access屬性默認(rèn)值顯示就給返回的那個(gè)變量
{
exact: true,
name: "用戶管理",
path: "/userMent",
component: "@/pages/UserMent",
access:"canUser",//以此控制視圖是否顯示
icon: "UserOutlined"
},
- 與登錄狀態(tài)連接時(shí)
在登錄頁 獲取到useRequest數(shù)據(jù)后
使用useModel重新設(shè)置access.ts拋出函數(shù)的初始值
const history = useHistory()
const { setInitialState } = useModel("@@initialState")
const onFinish = async (user:string,pwd:string) => {
const data = await run({
name: user,
password: pwd
})
console.log(user,pwd);
setInitialState(data)
// 進(jìn)而進(jìn)行本地存儲或者跳轉(zhuǎn)頁面操作
localStorage.setItem('userInfo', JSON.stringify(data))
history.push('/')
3I7W4F)A(OQT4`9O_)$YKYW.jpg
面試如果問用戶權(quán)限怎么配置丙号？
點(diǎn)擊登錄獲取到token和用戶信息，然后根據(jù)用戶信息判斷側(cè)邊欄是否顯示
- 如何實(shí)現(xiàn) 袄简？通過useModel可以返回一個(gè) setInitialState(data)方法霎挟，權(quán)限會重新獲取初始規(guī)則 然后配置路由時(shí)結(jié)合access實(shí)現(xiàn)視圖是否顯示
