Merge pull request #34 from so1s/SO1S-497

SO1S-497 토큰 만료등 401시 로그인 페이지로 리다이렉트
so1s · Nov 17, 2022 · a5ed238 · a5ed238
2 parents d8fa6c0 + 1b336f2
commit a5ed238
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
 import { createTheme, ThemeProvider } from '@mui/material';
 import Router from './components/router';
-import { WithAuth } from './hocs/with-auth';
 import { WithSnackbar } from './hocs/with-snackbar';
 
 const theme = createTheme({
@@ -17,11 +16,9 @@ const theme = createTheme({
 const App = () => {
     return (
         <ThemeProvider theme={theme}>
-            <WithAuth>
-                <WithSnackbar>
-                    <Router />
-                </WithSnackbar>
-            </WithAuth>
+            <WithSnackbar>
+                <Router />
+            </WithSnackbar>
         </ThemeProvider>
     );
 };

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -19,7 +19,6 @@ const NavBar: React.FC = () => {
                             key={e.name}
                             className="h-20 flex flex-grow cursor-pointer"
                             onClick={() => {
-                                setPage(e);
                                 navigate(e.uri);
                             }}
                         >

diff --git a/src/components/router.tsx b/src/components/router.tsx
@@ -2,6 +2,8 @@ import { useAtom } from 'jotai';
 import { BrowserRouter, Routes as ReactRoutes, Route } from 'react-router-dom';
 import { accessTokenWithPersistence } from '../atoms/token';
 import routes from '../constants/routes';
+import { WithAuth } from '../hocs/with-auth';
+import { WithHeader } from '../hocs/with-header';
 import LoginRedirect from '../pages/login-redirect';
 import Header from './header';
 import Navbar from './navbar';
@@ -18,17 +20,21 @@ const Router: React.FC = () => {
                             ? LoginRedirect
                             : e.page;
                     const Element = (
-                        <div className="w-screen h-screen flex flex-grow overflow-y-hidden">
-                            <div className="flex-1 flex-col flex-grow">
-                                <Header />
-                                <div className="flex h-full flex-row">
-                                    {!e.hidden && <Navbar />}
-                                    <div className="flex flex-col flex-1 h-[95vh] pt-10 overflow-y-scroll">
-                                        <Page />
+                        <WithHeader datum={e}>
+                            <WithAuth>
+                                <div className="w-screen h-screen flex flex-grow overflow-y-hidden">
+                                    <div className="flex-1 flex-col flex-grow">
+                                        <Header />
+                                        <div className="flex h-full flex-row">
+                                            {!e.hidden && <Navbar />}
+                                            <div className="flex flex-col flex-1 h-[95vh] pt-10 overflow-y-scroll">
+                                                <Page />
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
+                            </WithAuth>
+                        </WithHeader>
                     );
 
                     return <Route path={e.uri} key={e.uri} element={Element} />;

diff --git a/src/hocs/with-header.tsx b/src/hocs/with-header.tsx
@@ -0,0 +1,18 @@
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import currentPage from '../atoms/current-page';
+import { WithHeaderProps } from '../types/hocs';
+
+export const WithHeader: React.FC<WithHeaderProps> = ({ children, datum }) => {
+    const location = useLocation();
+    const [, setPage] = useAtom(currentPage);
+
+    useEffect(() => {
+        if (location.pathname === datum.uri) {
+            setPage(datum);
+        }
+    }, [datum, location.pathname]);
+
+    return <>{children}</>;
+};
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
 import { useAtom } from 'jotai';
 import axios from 'axios';
 import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { accessTokenWithPersistence } from '../atoms/token';
 import { baseURL } from '../constants';
 
@@ -10,6 +11,15 @@ export const axiosInstanceRef = new Proxy({ current: axiosInstance }, {});
 const useAuth = () => {
     const [accessToken, setAccessToken] = useAtom(accessTokenWithPersistence);
 
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!accessToken && location.pathname !== '/login') {
+            navigate('/login');
+        }
+    }, [accessToken]);
+
     useEffect(() => {
         axiosInstanceRef.current = axios.create({
             baseURL,

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -11,6 +11,7 @@ import { snackbarAtom } from '../atoms/snackbar';
 
 const Login: React.FC = () => {
     const [accessToken, setAccessToken] = useAtom(accessTokenWithPersistence);
+
     const usernameRef = useRef<HTMLInputElement>(null);
     const passwordRef = useRef<HTMLInputElement>(null);
 

diff --git a/src/types/hocs/index.ts b/src/types/hocs/index.ts
@@ -1,3 +1,9 @@
+import IRouterDatum from '../../interfaces/router';
+
 export type HoCProps = {
     children?: React.ReactNode;
 };
+
+export type WithHeaderProps = HoCProps & {
+    datum: IRouterDatum;
+};