[React] 로그인 여부 확인하기

react에서 로그인 여부 확인하는 간단한 예제를 만들어 봤다.

(react v6 이상)

 

App.js

import React from 'react';
import './App.css';
import { BrowserRouter} from 'react-router-dom'
import RouterList from './RouterList.js';

function App() {
  return (
    <div className ='container-md'>
      <BrowserRouter>
        <RouterList />
      </BrowserRouter>
    </div>
  );
}

export default App;

 

 

 

RouterList.js

• sessionStorage에서 인증 여부 변수를 가져와서 인증이 안 된 경우에, /login 링크로 redirect 한다. << authCheck()
  (로그인할 때, sessionStorage에 해당 변수를 넣어준다.)

import React, { useEffect, useState } from 'react'; 
import './App.css';
import { Routes, useLocation, Route, Navigate } from 'react-router-dom'
import Login from './pages/Login.js'
import Home from './pages/Home.js'
function RouterList() {
  let isAuthorized = Boolean(sessionStorage.getItem("isAuthorized"));
  const location = useLocation();

  function authCheck() { 
    if(!isAuthorized && location.pathname != "/login") {
      return <Navigate to="/login" />
    }
  }
  
  return (
    <div className ='container-md'> 
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/login" element={<Login />}/>
        <Route path="*" element={<h3><b>NOT FOUND PAGE</b></h3>} />
      </Routes>
      {authCheck()}
    </div>
  );
}

export default RouterList;