22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 1 | // src/feature/auth/authSlice.ts |
| 2 | |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 3 | import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit"; |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 4 | import type { AuthState } from "./types"; |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 5 | import type { LoginRequest } from "../../api/Auth/type"; |
| 6 | import AuthAPI from "../../api/Auth/AuthApi"; |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 7 | |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 8 | // 获取本地存储的 token |
| 9 | const storedToken = localStorage.getItem('token'); |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 10 | |
| 11 | const initialState: AuthState = { |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 12 | token: storedToken || '', |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 13 | loading: false, |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 14 | isAuth: !!storedToken, // 如果有token就设为true |
| 15 | error: '', |
| 16 | }; |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 17 | |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 18 | export const loginUser = createAsyncThunk< |
| 19 | {token: string}, |
| 20 | LoginRequest, |
| 21 | { rejectValue: string } |
| 22 | >( |
| 23 | 'auth/login', |
| 24 | async (loginRequest: LoginRequest, { rejectWithValue }) => { |
| 25 | try { |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 26 | const response = await AuthAPI.login(loginRequest); |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 27 | if(response.data.code == 0) { |
| 28 | return {token: response.data.data}; |
| 29 | } |
| 30 | else |
| 31 | return rejectWithValue(response.data.message); |
| 32 | } catch { |
| 33 | return rejectWithValue('登录失败'); |
| 34 | } |
| 35 | } |
| 36 | ); |
| 37 | |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 38 | // 新增:从localStorage恢复登录状态 |
| 39 | export const loginFromLocalStorage = createAsyncThunk< |
| 40 | {token: string} | {empty: true}, |
| 41 | void, |
| 42 | { rejectValue: string } |
| 43 | >( |
| 44 | 'auth/loginFromLocalStorage', |
| 45 | async (_, { rejectWithValue, dispatch }) => { |
| 46 | try { |
| 47 | const token = localStorage.getItem('token'); |
| 48 | if (!token) { |
| 49 | // 返回空状态而不是错误 |
| 50 | return { empty: true }; |
| 51 | } |
| 52 | |
| 53 | // 直接使用refreshToken来验证token有效性 |
| 54 | const result = await dispatch(refreshToken(token)); |
| 55 | if (refreshToken.fulfilled.match(result)) { |
| 56 | // refresh成功,返回新的token |
| 57 | return { token: result.payload.token }; |
| 58 | } else { |
| 59 | // refresh失败,token无效 |
| 60 | localStorage.removeItem('token'); |
| 61 | return rejectWithValue('token已失效,需要重新登录'); |
| 62 | } |
| 63 | } catch { |
| 64 | localStorage.removeItem('token'); |
| 65 | return rejectWithValue('恢复登录状态失败'); |
| 66 | } |
| 67 | } |
| 68 | ); |
| 69 | |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 70 | export const refreshToken = createAsyncThunk< |
| 71 | {token: string}, |
| 72 | string, |
| 73 | { rejectValue: string } |
| 74 | >( |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 75 | 'auth/refresh', |
| 76 | async (oldToken: string, { rejectWithValue }) => { |
| 77 | try { |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 78 | const response = await AuthAPI.refreshToken(oldToken); |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 79 | if(response.data.code == 0) |
| 80 | return {token: response.data.data}; |
| 81 | else |
| 82 | return rejectWithValue(response.data.message); |
| 83 | } catch { |
| 84 | return rejectWithValue('刷新失败'); |
| 85 | } |
| 86 | } |
| 87 | ); |
| 88 | |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 89 | const authSlice = createSlice({ |
| 90 | name: 'auth', |
| 91 | initialState, |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 92 | reducers: { |
| 93 | logout: (state) => { |
| 94 | state.token = ''; |
| 95 | state.isAuth = false; |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 96 | localStorage.clear(); |
22301014 | 62240ab | 2025-06-07 09:28:16 +0800 | [diff] [blame] | 97 | }, |
| 98 | |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 99 | // 清除错误信息 |
| 100 | clearError: (state) => { |
| 101 | state.error = ''; |
| 102 | }, |
| 103 | }, |
| 104 | extraReducers: (builder) => { |
| 105 | // 处理普通登录的异步操作 |
| 106 | builder |
| 107 | .addCase(loginUser.pending, (state) => { |
| 108 | state.loading = true; |
| 109 | state.error = ''; |
| 110 | }) |
| 111 | .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => { |
| 112 | state.loading = false; |
| 113 | state.token = action.payload.token; |
| 114 | state.isAuth = true; |
| 115 | localStorage.setItem('token', state.token); |
| 116 | }) |
| 117 | .addCase(loginUser.rejected, (state, action) => { |
| 118 | state.loading = false; |
| 119 | state.error = action.payload ? action.payload : ''; |
| 120 | }); |
| 121 | |
| 122 | // 处理从localStorage恢复登录状态 |
| 123 | builder |
| 124 | .addCase(loginFromLocalStorage.pending, (state) => { |
| 125 | state.loading = true; |
| 126 | state.error = ''; |
| 127 | }) |
| 128 | .addCase(loginFromLocalStorage.fulfilled, (state, action) => { |
| 129 | state.loading = false; |
| 130 | if ('token' in action.payload) { |
| 131 | // 有token的情况 |
| 132 | state.token = action.payload.token; |
| 133 | state.isAuth = true; |
| 134 | } else { |
| 135 | // 空token的情况 |
| 136 | state.token = ''; |
| 137 | state.isAuth = false; |
| 138 | } |
| 139 | }) |
| 140 | .addCase(loginFromLocalStorage.rejected, (state, action) => { |
| 141 | state.loading = false; |
| 142 | state.token = ''; |
| 143 | state.isAuth = false; |
| 144 | state.error = action.payload ? action.payload : ''; |
| 145 | localStorage.removeItem('token'); |
| 146 | }); |
| 147 | |
| 148 | // 处理刷新 token 的异步操作 |
| 149 | builder |
| 150 | .addCase(refreshToken.pending, (state) => { |
| 151 | state.loading = true; |
| 152 | state.error = ''; |
| 153 | }) |
| 154 | .addCase(refreshToken.fulfilled, (state, action) => { |
| 155 | state.loading = false; |
| 156 | state.token = action.payload.token; |
| 157 | state.isAuth = true; |
| 158 | localStorage.setItem('token', state.token); |
| 159 | }) |
| 160 | .addCase(refreshToken.rejected, (state, action) => { |
| 161 | state.loading = false; |
| 162 | state.error = action.payload ? action.payload : ''; |
| 163 | state.isAuth = false; |
| 164 | }); |
| 165 | }, |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 166 | }); |
22301014 | b1477f7 | 2025-06-07 22:54:40 +0800 | [diff] [blame] | 167 | |
22301014 | 4ce0587 | 2025-06-08 22:33:28 +0800 | [diff] [blame] | 168 | export const { logout, clearError } = authSlice.actions; |
22301014 | bc4616f | 2025-06-03 16:59:44 +0800 | [diff] [blame] | 169 | export default authSlice.reducer; |