完成顶部导航条
> 添加左侧logo
> 添加右侧用户信息展示
> 修复一些登录注册的跳转问题
> 修复axios拦截器错误的头设置
> 修复authApi错误的接口路径
> 组织api文件结构
Change-Id: Ifaec7e9a78ad6862ce7d0ce76be5181185186edd
diff --git a/src/feature/auth/AuthLayout.tsx b/src/feature/auth/AuthLayout.tsx
index 656d869..382001c 100644
--- a/src/feature/auth/AuthLayout.tsx
+++ b/src/feature/auth/AuthLayout.tsx
@@ -2,6 +2,7 @@
import { Outlet } from "react-router";
import auth_background from "../../assets/auth_background.png"
import slogan from "../../assets/slogan.png"
+
function AuthLayout() {
return (
diff --git a/src/feature/auth/Forget.tsx b/src/feature/auth/Forget.tsx
index a98ffcf..00c7793 100644
--- a/src/feature/auth/Forget.tsx
+++ b/src/feature/auth/Forget.tsx
@@ -3,7 +3,7 @@
import { NavLink, useNavigate } from 'react-router';
import { useState, useEffect } from 'react';
import { useForm } from 'antd/es/form/Form';
-import authApi from '../../api/authApi';
+import authApi from '../../api/Auth/AuthApi';
// 定义表单值的类型
interface FormValues {
diff --git a/src/feature/auth/Login.tsx b/src/feature/auth/Login.tsx
index 8043007..1ae6c85 100644
--- a/src/feature/auth/Login.tsx
+++ b/src/feature/auth/Login.tsx
@@ -3,7 +3,7 @@
import { NavLink, useNavigate } from 'react-router';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { loginUser } from './authSlice';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
import useMessage from 'antd/es/message/useMessage';
// 定义 Form 表单的字段类型
@@ -17,16 +17,17 @@
const dispatch = useAppDispatch();
const auth = useAppSelector(state => (state.auth));
const [messageApi, Message] = useMessage()
- const nav = useRef(useNavigate())
+ const nav = useNavigate()
useEffect(() => {
if (auth.isAuth) {
- nav.current('/');
+ nav('/', { replace: true });
}
if (!auth.loading && auth.error) {
messageApi.error(auth.error);
}
}, [auth, messageApi, nav])
+
// 给 onFinish 参数添加类型
const onFinish = async (values: FormValues) => {
try {
diff --git a/src/feature/auth/Register.tsx b/src/feature/auth/Register.tsx
index 0023b71..251e1c8 100644
--- a/src/feature/auth/Register.tsx
+++ b/src/feature/auth/Register.tsx
@@ -2,8 +2,8 @@
import { LockOutlined, MailOutlined, NumberOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message, Space } from 'antd';
import { NavLink, useNavigate } from 'react-router';
-import authApi from "../../api/authApi";
-import type { RejisterRequest } from "../../api/type";
+import authApi from "../../api/Auth/AuthApi";
+import type { RejisterRequest } from "../../api/Auth/type";
import type { AxiosResponse } from 'axios';
// 定义表单字段的类型
diff --git a/src/feature/auth/authSlice.ts b/src/feature/auth/authSlice.ts
index f1ab2a0..607a6fd 100644
--- a/src/feature/auth/authSlice.ts
+++ b/src/feature/auth/authSlice.ts
@@ -1,11 +1,13 @@
import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
import type { AuthState } from "../../store/types";
-import type { LoginRequest } from "../../api/type";
-import authAPI from "../../api/authApi";
+import type { LoginRequest } from "../../api/Auth/type";
+import AuthAPI from "../../api/Auth/AuthApi";
+// 获取本地存储的 token
+const storedToken = localStorage.getItem('token');
const initialState: AuthState = {
- token: '',
+ token: storedToken || '',
loading: false,
isAuth: false,
error: ''
@@ -19,7 +21,7 @@
'auth/login',
async (loginRequest: LoginRequest, { rejectWithValue }) => {
try {
- const response = await authAPI.login(loginRequest);
+ const response = await AuthAPI.login(loginRequest);
if(response.data.code == 0) {
return {token: response.data.data};
}
@@ -40,7 +42,8 @@
'auth/refresh',
async (oldToken: string, { rejectWithValue }) => {
try {
- const response = await authAPI.refreshToken(oldToken);
+ const response = await AuthAPI.refreshToken(oldToken);
+ console.log(response);
if(response.data.code == 0)
return {token: response.data.data};
else
@@ -94,5 +97,6 @@
},
});
-
+
+export const { logout } = authSlice.actions;
export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/feature/user/userSlice.ts b/src/feature/user/userSlice.ts
index e69de29..d6200af 100644
--- a/src/feature/user/userSlice.ts
+++ b/src/feature/user/userSlice.ts
@@ -0,0 +1,75 @@
+// src/store/userSlice.ts
+import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit';
+import type { UserInfo } from '../../api/User/type';
+import UserAPi from '../../api/User/UserApi';
+
+// 定义用户信息的类型
+interface UserState {
+ username: string;
+ userid: string;
+ email: string;
+ status: 'idle' | 'loading' | 'succeeded' | 'failed';
+ error: string | null;
+}
+
+// 定义初始状态
+const initialState: UserState = {
+ username: '',
+ userid: '',
+ email: '',
+ status: 'idle',
+ error: null,
+};
+
+
+// 创建异步 action，用于获取用户信息
+export const getUserInfo = createAsyncThunk<
+ UserInfo,
+ void,
+ {rejectValue:string}
+>(
+ 'user/getUserInfo',
+ async (_, { rejectWithValue }) => {
+ const response = await UserAPi.getMe();
+ if (response.data.code == 0) {
+ console.log("xixi")
+ console.log(response)
+ return response.data.data;
+ } else {
+ console.log("buxixi")
+ console.log(response)
+ return rejectWithValue(response.data.message);
+ }
+ }
+);
+
+// 创建 userSlice
+const userSlice = createSlice({
+ name: 'user',
+ initialState,
+ reducers: {
+ // 可以在这里处理同步操作，如修改用户名等
+ setUser: (state, action: PayloadAction<string>) => {
+ state.username = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(getUserInfo.pending, (state) => {
+ state.status = 'loading';
+ })
+ .addCase(getUserInfo.fulfilled, (state, action: PayloadAction<UserInfo>) => {
+ state.status = 'succeeded';
+ state.username = action.payload.username;
+ state.userid = action.payload.userid;
+ })
+ .addCase(getUserInfo.rejected, (state, action) => {
+ state.status = 'failed';
+ state.error = action.error.message ?? 'Unknown error';
+ });
+ },
+});
+
+// 导出 actions 和 reducer
+export const { setUser } = userSlice.actions;
+export default userSlice.reducer;