涉及的主要文件
.
├── mock
├── user.ts
└── src
├── pages.tsx
├── user
├── login
├── index.tsx
├── app.tsx
未登錄時,路由跳轉到登錄界面
非登陸界面
// 非登陸界面 ======>
### src/app.tsx ###########################
// 如果不是登錄頁面,執行
if (history.location.pathname !== '/user/login') {
const currentUser = await fetchUserInfo(); // 1. 通過fetchUserInfo訪問mock的api判斷是否登錄了(這里是通過后臺access參數驗證的,后面有描述)
const menuData = await fetchMenu();
return {
fetchUserInfo,
currentUser,
menuData,
settings: defaultSettings,
};
}
### src/app.tsx ###########################
// fetchUserInfo 具體請求
const fetchUserInfo = async () => {
try {
const currentUser = await queryCurrent(); // 2. fetchUserInfo具體請求api判斷是否登錄了
return currentUser;
} catch (error) {
history.push('/user/login'); // 5. 401狀態拋出異常,跳轉到登錄界面
}
return undefined;
};
### mock/user.ts ###########################
// 請求數據返回
const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';
const getAccess = () => {
return access;
};
......
if (!getAccess()) { // 3. 判斷access是否登錄,此時的 access 為''
res.status(401).send({ // 4. 返回401狀態
data: {
isLogin: false,
},
errorCode: '401',
errorMessage: '請先登錄!',
success: true,
});
return;
}
登錄界面
// 登錄界面 =======>
### src/user/login/index.tsx###########################
// 登錄
const msg = await fakeAccountLogin({ ...values, type }); // 1. 登錄請求
### mock/user.ts ###########################
// 數據請求返回
if (password === 'ant.design' && username === 'admin') {
res.send({ // 2. 返回數據
status: 'ok',
type,
currentAuthority: 'admin',
});
access = 'admin'; // 3. 將access參數賦值為 'adimin'
return;
}
### src/user/login/index.tsx###########################
if (msg.status === 'ok' && initialState) {
message.success('登錄成功!');
const currentUser = await initialState?.fetchUserInfo(); // 4. 與非登陸界面操作一樣,使用fetchUserInfo函數請求后臺,判斷是否為登錄(即判斷access參數,此時為'admin')
setInitialState({
...initialState,
currentUser, // 5. 返回數據寫入全局變量
});
replaceGoto(); // 6. 跳轉進入后臺管理界面
return;
}
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。