完成Work组件的界面和一些小修改
> 1. 修改优化路由守卫
> 2. 去除拦截器中的调试信息
> 3. 修改头部导航条下拉菜单的样式增加图标。
> 4. work组件现在使用mock数据
Change-Id: Ic602a35bb02e645a0d5253c5cbd12a68d70bfb33
diff --git a/src/feature/auth/authSlice.ts b/src/feature/auth/authSlice.ts
index 607a6fd..289ce16 100644
--- a/src/feature/auth/authSlice.ts
+++ b/src/feature/auth/authSlice.ts
@@ -1,5 +1,7 @@
+// src/feature/auth/authSlice.ts
+
import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { AuthState } from "../../store/types";
+import type { AuthState } from "./types";
import type { LoginRequest } from "../../api/Auth/type";
import AuthAPI from "../../api/Auth/AuthApi";
@@ -9,9 +11,9 @@
const initialState: AuthState = {
token: storedToken || '',
loading: false,
- isAuth: false,
- error: ''
-}
+ isAuth: !!storedToken, // 如果有token就设为true
+ error: '',
+};
export const loginUser = createAsyncThunk<
{token: string},
@@ -33,17 +35,47 @@
}
);
+// 新增：从localStorage恢复登录状态
+export const loginFromLocalStorage = createAsyncThunk<
+ {token: string} | {empty: true},
+ void,
+ { rejectValue: string }
+>(
+ 'auth/loginFromLocalStorage',
+ async (_, { rejectWithValue, dispatch }) => {
+ try {
+ const token = localStorage.getItem('token');
+ if (!token) {
+ // 返回空状态而不是错误
+ return { empty: true };
+ }
+
+ // 直接使用refreshToken来验证token有效性
+ const result = await dispatch(refreshToken(token));
+ if (refreshToken.fulfilled.match(result)) {
+ // refresh成功，返回新的token
+ return { token: result.payload.token };
+ } else {
+ // refresh失败，token无效
+ localStorage.removeItem('token');
+ return rejectWithValue('token已失效，需要重新登录');
+ }
+ } catch {
+ localStorage.removeItem('token');
+ return rejectWithValue('恢复登录状态失败');
+ }
+ }
+);
+
export const refreshToken = createAsyncThunk<
{token: string},
string,
{ rejectValue: string }
>(
-
'auth/refresh',
async (oldToken: string, { rejectWithValue }) => {
try {
const response = await AuthAPI.refreshToken(oldToken);
- console.log(response);
if(response.data.code == 0)
return {token: response.data.data};
else
@@ -61,42 +93,77 @@
logout: (state) => {
state.token = '';
state.isAuth = false;
- localStorage.clear()
- },
- },extraReducers: (builder) => {
- // 处理登录的异步操作
- builder
- .addCase(loginUser.pending, (state) => {
- state.loading = true;
- })
- .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
- state.loading = false;
- state.token = action.payload.token;
- state.isAuth = true;
-
- localStorage.setItem('token', state.token);
- })
- .addCase(loginUser.rejected, (state, action) => {
- state.loading = false;
- state.error = action.payload ? action.payload : '' // 错误处理
- })
-
- // 处理刷新 token 的异步操作
- .addCase(refreshToken.pending, (state) => {
- state.loading = true;
- })
- .addCase(refreshToken.fulfilled, (state, action) => {
- state.loading = false;
- state.token = action.payload.token;
- localStorage.setItem('token', state.token);
- })
- .addCase(refreshToken.rejected, (state, action) => {
- state.loading = false;
- state.error = action.payload ? action.payload : ''
- });
+ localStorage.clear();
},
+ // 清除错误信息
+ clearError: (state) => {
+ state.error = '';
+ },
+ },
+ extraReducers: (builder) => {
+ // 处理普通登录的异步操作
+ builder
+ .addCase(loginUser.pending, (state) => {
+ state.loading = true;
+ state.error = '';
+ })
+ .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
+ state.loading = false;
+ state.token = action.payload.token;
+ state.isAuth = true;
+ localStorage.setItem('token', state.token);
+ })
+ .addCase(loginUser.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload ? action.payload : '';
+ });
+
+ // 处理从localStorage恢复登录状态
+ builder
+ .addCase(loginFromLocalStorage.pending, (state) => {
+ state.loading = true;
+ state.error = '';
+ })
+ .addCase(loginFromLocalStorage.fulfilled, (state, action) => {
+ state.loading = false;
+ if ('token' in action.payload) {
+ // 有token的情况
+ state.token = action.payload.token;
+ state.isAuth = true;
+ } else {
+ // 空token的情况
+ state.token = '';
+ state.isAuth = false;
+ }
+ })
+ .addCase(loginFromLocalStorage.rejected, (state, action) => {
+ state.loading = false;
+ state.token = '';
+ state.isAuth = false;
+ state.error = action.payload ? action.payload : '';
+ localStorage.removeItem('token');
+ });
+
+ // 处理刷新 token 的异步操作
+ builder
+ .addCase(refreshToken.pending, (state) => {
+ state.loading = true;
+ state.error = '';
+ })
+ .addCase(refreshToken.fulfilled, (state, action) => {
+ state.loading = false;
+ state.token = action.payload.token;
+ state.isAuth = true;
+ localStorage.setItem('token', state.token);
+ })
+ .addCase(refreshToken.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload ? action.payload : '';
+ state.isAuth = false;
+ });
+ },
});
-export const { logout } = authSlice.actions;
+export const { logout, clearError } = authSlice.actions;
export default authSlice.reducer;
\ No newline at end of file