feat: auth routing (#146)

* feat: add loading view * feat: add auth routing * feat: set accessToken to localStorage * fix: remove /auth paths * feat: handle token access
team-offonoff · Jan 24, 2024 · 3f31712 · 3f31712
1 parent f4b1215
commit 3f31712
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 80 deletions.
diff --git a/src/apis/fetch.ts b/src/apis/fetch.ts
@@ -1,3 +1,5 @@
+import { ACCESS_TOKEN } from 'src/constants/localStorage';
+
 import { ErrorResponse } from '@interfaces/api/error';
 
 export class ResponseError extends Error {
@@ -76,6 +78,7 @@ class Fetch {
 
   setAccessToken(token: string) {
     this.accessToken = token;
+    localStorage.setItem(ACCESS_TOKEN, token);
   }
 }
 

diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts
@@ -0,0 +1 @@
+export const ACCESS_TOKEN = 'access_token';
diff --git a/src/interfaces/models/user.ts b/src/interfaces/models/user.ts
@@ -1,6 +1,4 @@
 export interface User {
   memberId: number;
-  nickname?: string;
-  accessToken?: string;
-  refrehToken?: string;
+  nickname: string;
 }
diff --git a/src/routes/Auth/kakao/KakaoLogin.tsx b/src/routes/Auth/kakao/KakaoLogin.tsx
@@ -3,18 +3,23 @@ import { useNavigate } from 'react-router';
 import { useAuthStore } from 'src/store/auth';
 
 import { kakaoLogin } from '@apis/oauth/kakao';
+import { Row } from '@components/commons/Flex/Flex';
 
-import { ResponseError } from '@apis/fetch';
+import { colors, zIndex } from '@styles/theme';
+
+import { ALogoIcon, BLogoIcon } from '@icons/index';
+
+import client, { ResponseError } from '@apis/fetch';
 
 import Login from '../login/Login';
 
 import { Container } from './KakaoLogin.styles';
 
 const KakaoLogin = () => {
-  const setUser = useAuthStore((state) => state.setUser);
   const kakaoCode = new URL(window.location.href).searchParams.get('code');
 
   const navigate = useNavigate();
+  const login = useAuthStore((state) => state.login);
 
   const handleKakaoLogin = async () => {
     if (kakaoCode) {
@@ -26,7 +31,8 @@ const KakaoLogin = () => {
               state: { memberId: response.memberId },
             });
           } else {
-            setUser({ memberId: response.memberId, accessToken: response.accessToken });
+            client.setAccessToken(response.accessToken);
+            login();
             navigate('/');
           }
         }
@@ -51,6 +57,27 @@ const KakaoLogin = () => {
 
   return (
     <Container>
+      <div
+        className="loading"
+        style={{
+          position: 'fixed',
+          overflow: 'hidden',
+          height: '100vh',
+          width: '100vw',
+          zIndex: zIndex.modal,
+          backgroundColor: colors.navy_60,
+        }}
+      >
+        <Row
+          justifyContent={'center'}
+          alignItems={'center'}
+          gap={7.5}
+          style={{ width: '100%', height: '100%' }}
+        >
+          <ALogoIcon width={65} />
+          <BLogoIcon width={66} />
+        </Row>
+      </div>
       <Login />
     </Container>
   );

diff --git a/src/routes/Auth/login/Login.tsx b/src/routes/Auth/login/Login.tsx
@@ -9,7 +9,7 @@ import { colors, theme } from '@styles/theme';
 
 import { ABLogoIcon, AppleIcon, GoogleIcon, KakaoIcon } from '@icons/index';
 
-import { Container, Divider, LoginButtonContainer, LogoContainer } from './Login.styles';
+import { Container, Divider, LoginButtonContainer } from './Login.styles';
 
 const Login = () => {
   const KakaoRestApiKey = import.meta.env.VITE_KAKAO_OAUTH_KEY;

diff --git a/src/routes/Auth/signup/Terms.tsx b/src/routes/Auth/signup/Terms.tsx
@@ -1,5 +1,4 @@
 import React, { ChangeEvent, useState } from 'react';
-import { useAuthStore } from 'src/store/auth';
 
 import { useTerms } from '@apis/oauth/signup';
 import Checkbox from '@components/commons/CheckBox/CheckBox';
@@ -16,7 +15,6 @@ interface TermsProps {
 
 const Terms = ({ memberId }: TermsProps) => {
   const consentToTermMutation = useTerms();
-  const setUser = useAuthStore((state) => state.setUser);
   const [all, setAll] = useState(false);
   const [consentToTerm, setConsentToTerm] = useState(false);
   const [consentToCollectAndUseInfo, setConsentToCollectAndUseInfo] = useState(false);
@@ -45,10 +43,6 @@ const Terms = ({ memberId }: TermsProps) => {
       memberId,
       listen_marketing: consetToMarketing,
     });
-    setUser({
-      memberId: response.memberId,
-      accessToken: response.accessToken,
-    });
   };
 
   return (

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom';
+import {
+  Navigate,
+  Outlet,
+  Route,
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements,
+} from 'react-router-dom';
 import { useAuthStore } from 'src/store/auth';
 
 import GoogleLogin from './Auth/google/GoogleLogin';
@@ -11,65 +18,36 @@ import Notification from './Notification/Notification';
 import TopicCreate from './Topic/TopicCreate';
 import TopicSideSelection from './Topic/TopicSideSelection';
 
-const Router = () => {
-  const user = useAuthStore((state) => state.user);
-  const isAuthorized = user !== null;
-
-  const authorizedRoutes: RouteObject[] = [
-    {
-      path: '/',
-      children: [
-        {
-          index: true,
-          element: <Home />,
-        },
-        {
-          path: 'topics/create',
-          element: <TopicSideSelection />,
-        },
-        {
-          path: 'topics/create/:topicSide',
-          element: <TopicCreate />,
-        },
-        {
-          path: 'notifications',
-          element: <Notification />,
-        },
-      ],
-    },
-  ];
+const ProtectedRoute = () => {
+  const isLoggedIn = useAuthStore((store) => store.isLoggedIn);
 
-  const publicRoutes: RouteObject[] = [
-    {
-      path: '/',
-      children: [
-        {
-          path: 'signup',
-          element: <Signup />,
-        },
-        {
-          path: 'login',
-          element: <Login />,
-        },
-        {
-          path: 'login/kakao',
-          element: <KakaoLogin />,
-        },
-        {
-          path: 'login/google',
-          element: <GoogleLogin />,
-        },
-      ],
-    },
-  ];
+  if (!isLoggedIn) {
+    return <Navigate to={'/login'} replace />;
+  }
 
-  const routes = import.meta.env.DEV
-    ? [...authorizedRoutes, ...publicRoutes]
-    : isAuthorized
-    ? authorizedRoutes
-    : publicRoutes;
+  return <Outlet />;
+};
 
-  const router = createBrowserRouter(routes);
+const Router = () => {
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" errorElement={<div>Error...</div>}>
+        <Route path="*" element={<ProtectedRoute />}>
+          <Route index element={<Home />} />
+          <Route path="topics">
+            <Route path="create" element={<TopicSideSelection />} />
+            <Route path="create/:topicSide" element={<TopicCreate />} />
+          </Route>
+          <Route path="notifications" element={<Notification />} />
+        </Route>
+
+        <Route path="login" element={<Login />} />
+        <Route path="login/kakao" element={<KakaoLogin />} />
+        <Route path="login/google" element={<GoogleLogin />} />
+        <Route path="signup" element={<Signup />} />
+      </Route>
+    )
+  );
 
   return <RouterProvider router={router} />;
 };

diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -1,18 +1,36 @@
+import { ACCESS_TOKEN } from 'src/constants/localStorage';
 import { create } from 'zustand';
-
-import { User } from '@interfaces/models/user';
+import { persist } from 'zustand/middleware';
 
 interface AuthState {
-  user: User | null;
+  isLoggedIn: boolean;
 }
 
 interface AuthAction {
-  setUser: (user: User) => void;
+  login: () => boolean;
+  logout: () => void;
 }
 
-export const useAuthStore = create<AuthState & AuthAction>((set) => ({
-  user: null,
-  setUser: (user: User) => {
-    set({ user: user });
-  },
-}));
+export const useAuthStore = create(
+  persist<AuthState & AuthAction>(
+    (set) => ({
+      isLoggedIn: false,
+      login: () => {
+        const userLocalStorage = localStorage.getItem(ACCESS_TOKEN);
+        if (userLocalStorage) {
+          set({ isLoggedIn: true });
+          return true;
+        } else {
+          return false;
+        }
+      },
+      logout: () => {
+        set({ isLoggedIn: false });
+        localStorage.clear();
+      },
+    }),
+    {
+      name: 'userLoginStatus',
+    }
+  )
+);