feat: auth仓库不在做发出网络请求 只存储信息 用hooks的方式完成登录逻辑

Author: Ohh-889

src/features/auth/auth.ts

@@ -2,10 +2,12 @@ import { useLoading } from '@sa/hooks';
 
 import { getIsLogin, selectUserInfo } from '@/features/auth/authStore';
 import { useRoute, useRouter } from '@/features/router';
+import { fetchGetUserInfo, fetchLogin } from '@/service/api';
+import { localStg } from '@/utils/storage';
 
 import { useCacheTabs } from '../tab/tabHooks';
 
-import { login, resetAuth as resetAuthAction } from './authStore';
+import { resetAuth as resetAuthAction, setToken, setUserInfo } from './authStore';
 import { clearAuthStorage } from './shared';
 
 export function useAuth() {
@@ -43,27 +45,38 @@ export function useInitAuth() {
 
   const redirectUrl = searchParams.get('redirect');
 
-  async function toLogin(params: { password: string; userName: string }, redirect = true) {
+  async function toLogin({ password, userName }: { password: string; userName: string }, redirect = true) {
     if (loading) return;
 
     startLoading();
-    const res = await dispatch(login(params));
+    const { data: loginToken, error } = await fetchLogin(userName, password);
 
-    const info = res.payload as Api.Auth.Info;
+    if (!error) {
+      localStg.set('token', loginToken.token);
+      localStg.set('refreshToken', loginToken.refreshToken);
 
-    if (info.token) {
-      if (redirect) {
-        if (redirectUrl) {
-          navigate(redirectUrl);
-        } else {
-          navigate('/');
+      const { data: info, error: userInfoError } = await fetchGetUserInfo();
+
+      if (!userInfoError) {
+        // 2. store user info
+        localStg.set('userInfo', info);
+
+        dispatch(setToken(loginToken.token));
+        dispatch(setUserInfo(info));
+
+        if (redirect) {
+          if (redirectUrl) {
+            navigate(redirectUrl);
+          } else {
+            navigate('/');
+          }
         }
-      }
 
-      window.$notification?.success({
-        description: t('page.login.common.welcomeBack', { userName: info.userInfo.userName }),
-        message: t('page.login.common.loginSuccess')
-      });
+        window.$notification?.success({
+          description: t('page.login.common.welcomeBack', { userName: info.userName }),
+          message: t('page.login.common.loginSuccess')
+        });
+      }
     }
 
     endLoading();
@@ -79,8 +92,8 @@ export function useResetAuth() {
   const dispatch = useAppDispatch();
 
   const {
-    fullPath,
-    handle: { constant }
+    handle: { constant },
+    redirect
   } = useRoute();
 
   const cacheTabs = useCacheTabs();
@@ -97,7 +110,7 @@ export function useResetAuth() {
     cacheTabs();
 
     if (!constant) {
-      push('/login', { redirect: fullPath });
+      push('/login', { redirect: redirect?.fullPath });
     }
   }
 

src/features/auth/authStore.ts

@@ -1,8 +1,5 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-import { fetchGetUserInfo, fetchLogin } from '@/service/api';
-import { createAppSlice } from '@/store/createAppSlice';
-import { localStg } from '@/utils/storage';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSelector, createSlice } from '@reduxjs/toolkit';
 
 import { getToken, getUserInfo } from './shared';
 
@@ -11,53 +8,27 @@ const initialState = {
   userInfo: getUserInfo()
 };
 
-export const authSlice = createAppSlice({
+export const authSlice = createSlice({
   initialState,
   name: 'auth',
-  reducers: create => ({
-    login: create.asyncThunk(
-      async ({ password, userName }: { password: string; userName: string }) => {
-        const { data: loginToken, error } = await fetchLogin(userName, password);
-        // 1. stored in the localStorage, the later requests need it in headers
-        if (!error) {
-          localStg.set('token', loginToken.token);
-          localStg.set('refreshToken', loginToken.refreshToken);
-
-          const { data: info, error: userInfoError } = await fetchGetUserInfo();
-
-          if (!userInfoError) {
-            // 2. store user info
-            localStg.set('userInfo', info);
-            return {
-              token: loginToken.token,
-              userInfo: info
-            };
-          }
-        }
-
-        return initialState;
-      },
-
-      {
-        fulfilled: (state, { payload }) => {
-          if (payload) {
-            state.token = payload.token;
-            state.userInfo = payload.userInfo;
-          }
-        }
-      }
-    ),
-    resetAuth: create.reducer(() => initialState)
-  }),
+  reducers: {
+    resetAuth: () => initialState,
+    setToken: (state, { payload }: PayloadAction<string>) => {
+      state.token = payload;
+    },
+    setUserInfo: (state, { payload }: PayloadAction<Api.Auth.UserInfo>) => {
+      state.userInfo = payload;
+    }
+  },
   selectors: {
     selectToken: auth => auth.token,
     selectUserInfo: auth => auth.userInfo
   }
 });
 
-export const { selectToken, selectUserInfo } = authSlice.selectors;
+export const { resetAuth, setToken, setUserInfo } = authSlice.actions;
 
-export const { login, resetAuth } = authSlice.actions;
+export const { selectToken, selectUserInfo } = authSlice.selectors;
 
 /** Is login */
 export const getIsLogin = createSelector([selectToken], token => Boolean(token));

src/features/router/index.ts

@@ -1,7 +1,5 @@
 export * from './router';
 
-export * from './router-context';
-
 export * from './RouterProvider';
 
 export * from './useRoute';