login

src/redux/hooks.ts

@@ -0,0 +1,8 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// типизированный dispatch
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+
+// типизированный selector
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/redux/slices/auth.ts

@@ -0,0 +1,155 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import axios from "../../axios";
+
+// Типы данных
+interface AuthState {
+  jwt: string | null;
+  refreshToken: string | null;
+  username: string | null;
+  status: "idle" | "loading" | "succeeded" | "failed";
+  error: string | null;
+}
+
+// Инициализация состояния
+const initialState: AuthState = {
+  jwt: null,
+  refreshToken: null,
+  username: null,
+  status: "idle",
+  error: null,
+};
+
+// AsyncThunk: Регистрация
+export const registerUser = createAsyncThunk(
+  "auth/register",
+  async (
+    { username, email, password }: { username: string; email: string; password: string },
+    { rejectWithValue }
+  ) => {
+    try {
+      const response = await axios.post("/authentication/register", { username, email, password });
+      return response.data; // { jwt, refreshToken }
+    } catch (err: any) {
+      return rejectWithValue(err.response?.data?.message || "Registration failed");
+    }
+  }
+);
+
+// AsyncThunk: Логин
+export const loginUser = createAsyncThunk(
+  "auth/login",
+  async (
+    { username, password }: { username: string; password: string },
+    { rejectWithValue }
+  ) => {
+    try {
+      const response = await axios.post("/authentication/login", { username, password });
+      return response.data; // { jwt, refreshToken }
+    } catch (err: any) {
+      return rejectWithValue(err.response?.data?.message || "Login failed");
+    }
+  }
+);
+
+// AsyncThunk: Обновление токена
+export const refreshToken = createAsyncThunk(
+  "auth/refresh",
+  async ({ refreshToken }: { refreshToken: string }, { rejectWithValue }) => {
+    try {
+      const response = await axios.post("/authentication/refresh", { refreshToken });
+      return response.data; // { username }
+    } catch (err: any) {
+      return rejectWithValue(err.response?.data?.message || "Refresh token failed");
+    }
+  }
+);
+
+// AsyncThunk: Получение информации о пользователе
+export const fetchWhoAmI = createAsyncThunk(
+  "auth/whoami",
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await axios.get("/authentication/whoami");
+      return response.data; // { username }
+    } catch (err: any) {
+      return rejectWithValue(err.response?.data?.message || "Failed to fetch user info");
+    }
+  }
+);
+
+// Slice
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    logout: (state) => {
+      state.jwt = null;
+      state.refreshToken = null;
+      state.username = null;
+      state.status = "idle";
+      state.error = null;
+    },
+  },
+  extraReducers: (builder) => {
+    // Регистрация
+    builder.addCase(registerUser.pending, (state) => {
+      state.status = "loading";
+      state.error = null;
+    });
+    builder.addCase(registerUser.fulfilled, (state, action: PayloadAction<{ jwt: string; refreshToken: string }>) => {
+      state.status = "succeeded";
+      state.jwt = action.payload.jwt;
+      state.refreshToken = action.payload.refreshToken;
+    });
+    builder.addCase(registerUser.rejected, (state, action: PayloadAction<any>) => {
+      state.status = "failed";
+      state.error = action.payload;
+    });
+
+    // Логин
+    builder.addCase(loginUser.pending, (state) => {
+      state.status = "loading";
+      state.error = null;
+    });
+    builder.addCase(loginUser.fulfilled, (state, action: PayloadAction<{ jwt: string; refreshToken: string }>) => {
+      state.status = "succeeded";
+      state.jwt = action.payload.jwt;
+      state.refreshToken = action.payload.refreshToken;
+    });
+    builder.addCase(loginUser.rejected, (state, action: PayloadAction<any>) => {
+      state.status = "failed";
+      state.error = action.payload;
+    });
+
+    // Обновление токена
+    builder.addCase(refreshToken.pending, (state) => {
+      state.status = "loading";
+      state.error = null;
+    });
+    builder.addCase(refreshToken.fulfilled, (state, action: PayloadAction<{ username: string }>) => {
+      state.status = "succeeded";
+      state.username = action.payload.username;
+    });
+    builder.addCase(refreshToken.rejected, (state, action: PayloadAction<any>) => {
+      state.status = "failed";
+      state.error = action.payload;
+    });
+
+    // Получение информации о пользователе
+    builder.addCase(fetchWhoAmI.pending, (state) => {
+      state.status = "loading";
+      state.error = null;
+    });
+    builder.addCase(fetchWhoAmI.fulfilled, (state, action: PayloadAction<{ username: string }>) => {
+      state.status = "succeeded";
+      state.username = action.payload.username;
+    });
+    builder.addCase(fetchWhoAmI.rejected, (state, action: PayloadAction<any>) => {
+      state.status = "failed";
+      state.error = action.payload;
+    });
+  },
+});
+
+export const { logout } = authSlice.actions;
+export const authReducer = authSlice.reducer;

src/redux/store.ts

@@ -1,15 +1,25 @@
 import { configureStore } from "@reduxjs/toolkit";
-//import { userReducer } from "./slices/user";
+import { authReducer } from "./slices/auth";
 
-//import { useDispatch } from "react-redux";
-//const dispatch = useDispatch();
-//dispatch(loginUser({ login: "123", password: "pas" }));
-// useSelector((state: any) => state.user.isAuthorized.status);
 
-const store = configureStore({
+// использование
+// import { useAppDispatch, useAppSelector } from '../redux/hooks';
+// import { setUser, logout } from '../redux/slice/userSlice';
+
+// export default function Profile() {
+//   const dispatch = useAppDispatch();
+//   const user = useAppSelector((state) => state.user);
+
+
+export const store = configureStore({
   reducer: {
     //user: userReducer,
+    auth: authReducer,
   },
 });
 
-export default store;
+// тип состояния всего стора
+export type RootState = ReturnType<typeof store.getState>;
+
+// тип dispatch
+export type AppDispatch = typeof store.dispatch;