antd pro v5 登錄流程

涉及的主要文件

.
├── 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;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。