add token in auth

src/components/Login/Form/index.jsx

@@ -14,7 +14,7 @@ import { object, string } from "yup";
 const LoginForm = () => {
     const [showPassword, setShowPassword] = useState(false);
     const requestServer = useRequest();
-    const { getUser } = useAuth();
+    const { setToken } = useAuth();
     const defaultValues = {
         username: "",
         password: "",
@@ -42,10 +42,10 @@ const LoginForm = () => {
             const formData = new FormData();
             formData.append("username", data.username);
             formData.append("password", data.password);
-            await requestServer(GET_USER_LOGIN_ROUTE, "post", {
+            const response = await requestServer(GET_USER_LOGIN_ROUTE, "post", {
                 data: formData,
             });
-            getUser();
+            setToken(response.data.data.token);
         } catch (error) { }
     };
 

src/lib/contexts/auth.js

@@ -6,6 +6,7 @@ import { createContext, useCallback, useContext, useEffect, useReducer, useState
 const initAuth = {
     initAuthState: false,
     isAuth: false,
+    token: null,
     user: {},
 };
 
@@ -19,6 +20,12 @@ const authReducer = (state, action) => {
             return { ...state, isAuth: action.isAuth };
         case "CHANGE_INIT_AUTH":
             return { ...state, initAuthState: action.initAuthState };
+        case "CLEAR_TOKEN":
+            localStorage.removeItem("_token");
+            return { ...state, token: null };
+        case "SET_TOKEN":
+            localStorage.setItem("_token", action.token);
+            return { ...state, token: action.token };
         default:
             return state;
     }
@@ -46,7 +53,16 @@ export const AuthProvider = ({ children }) => {
         dispatch({ type: "CHANGE_INIT_AUTH", initAuthState });
     }, []);
 
+    const clearToken = useCallback(() => {
+        dispatch({ type: "CLEAR_TOKEN" });
+    }, []);
+
+    const setToken = useCallback((token) => {
+        dispatch({ type: "SET_TOKEN", token });
+    }, []);
+
     const logout = () => {
+        clearToken()
         clearUser();
         changeAuthState(false);
         changeInitAuth(true);
@@ -55,7 +71,7 @@ export const AuthProvider = ({ children }) => {
     const getUser = useCallback(async () => {
         try {
             const { data } = await axios.get(GET_USER_ROUTE, {
-                withCredentials: true,
+                headers: { authorization: `Bearer ${state.token}` },
             });
             changeUser(data.data);
             changeAuthState(true);
@@ -74,20 +90,33 @@ export const AuthProvider = ({ children }) => {
                 message: " مشکلی در احراز هویت رخ داده است . دقایقی بعد امتحان کنید!!!",
             });
         }
-    }, [clearUser, changeUser, changeAuthState, changeInitAuth]);
+    }, [state.token, clearUser, changeUser, changeAuthState, changeInitAuth]);
 
     useEffect(() => {
-        getUser();
+        const localToken = localStorage.getItem("_token");
+        if (localToken) dispatch({ type: "SET_TOKEN", token: localToken });
     }, []);
 
+    useEffect(() => {
+        if (!state.token) {
+            clearUser();
+            changeAuthState(false);
+            changeInitAuth(true);
+            return;
+        }
+        getUser();
+    }, [state.token]);
+
     return (
         <AuthContext.Provider
             value={{
+                token: state.token,
                 user: state.user,
                 isAuth: state.isAuth,
                 initAuthState: state.initAuthState,
                 getUser,
                 logout,
+                setToken,
                 errorState,
             }}
         >

src/lib/hooks/useRequest.js

@@ -6,9 +6,7 @@ import { useSidebarBadge } from "./useSidebarBadge";
 
 const defaultOptions = {
     data: {},
-    requestOptions: {
     headers: {},
-    },
     notificationShow: true,
     notificationSuccess: false,
     notificationFailed: true,
@@ -21,7 +19,7 @@ const useRequest = (initOptions) => {
     const { mutate: sidebarUpdate } = useSidebarBadge({
         enable: _options.hasSidebarUpdate,
     });
-    const { logout } = useAuth();
+    const { token, logout } = useAuth();
 
     /**
      * Performs an HTTP request.
@@ -37,8 +35,7 @@ const useRequest = (initOptions) => {
                 url,
                 method,
                 data: method === "get" ? null : mergedOptions.data,
-                withCredentials: true,
-                ...mergedOptions.requestOptions,
+                headers: { authorization: `Bearer ${token}`, ...mergedOptions.headers, },
             });
             if (mergedOptions.hasSidebarUpdate) {
                 if (method === "post" || method === "put" || method === "delete") sidebarUpdate();