[컴포넌트] react router v6 비로그인 접근 막기

비로그인 접근 막기

컴포넌트	방법	예시
PrivateRoute	비로그인 시 접근 불가 페이지	마이페이지 등
PublicRoute	비로그인 시에도 접근 가능 페이지	메인페이지, 로그인, 회원가입 페이지 등

💡 방법

1. 로그인 정보를 통해서 진행을 한다.
2. 로그인정보는 세션을 통해서 관리를 하고있기떄문에 localStorage를 통해서 로그인의 유무만 저장해놓는다.
3. 로그인 유무를 통해 route를 이용하여 public을 실행할지 private 실행을 확인한다.

📌 getIsLogin

export default function getIsLogin() {
  return !!localStorage.getItem('userId')
}

📌 PrivateRoute

import React from 'react'
import {useLocation} from 'react-router'
import {Navigate, Outlet} from 'react-router-dom'
import getIsLogin from './getIsLogin'

export const publicPage = ['/', 'exam']

function PrivateRoutes() {
  const location = useLocation()
  const {pathname, search} = location
  const from = pathname + search
  const isLogined = getIsLogin()

  const passPage = publicPage.includes(pathname)
    
  return isLogined || passPage ? <Outlet /> : <Navigate to="/login" replace state={{from}} />
}

export default PrivateRoutes

📌 PublicRoute

import React, {useEffect} from 'react'
import {Navigate, useLocation, useNavigate} from 'react-router'
import {Outlet} from 'react-router-dom'
import getIsLogin from './getIsLogin'

function PublicRoute() {
  const location = useLocation()
  const navigate = useNavigate()
  const isLogined = getIsLogin()

  return isLogined ? <Navigate to={from} replace /> : <Outlet />
}

export default PublicRoute

📌 basicRoutes

import loadable from '@loadable/component'
import PrivateRoutes from './PrivateRoute'

const BasicLayout = loadable(() => import('./BasicLayout'))
const Index = loadable(() => import('./index'))
const Home = loadable(() => import('./home'))
const Error404 = loadable(() => import('./Error404'))

export default {
  path: '/',
  element: <PrivateRoutes />,
  children: [
    {
      element: <BasicLayout />, // 공용 레이아웃
      children: [
        {index: true, element: <Index />},
        {path: 'home', element: <Home />},
      ]
    }
  ],
  errorElement: <Error404 />
}

📌 authRoutes

import loadable from '@loadable/component'

const PublicRoute = loadable(() => import('./PublicRoute'))
const AuthLayout = loadable(() => import('./AuthLayout'))
const Login = loadable(() => import('./login'))
const Register = loadable(() => import('./register'))
const Error404 = loadable(() => import('./Error404'))

export default {
  path: '',
  element: <PublicRoute />,
  children: [
    {
      element: <AuthLayout />, // 공용 레이아웃
      children: [
        {path: '/login', element: <Login />},
        {path: '/register', element: <Register />},
      ]
    }
  ],
  errorElement: <Error404 />
}

📌 routes

import {createBrowserRouter} from 'react-router-dom'
import basicRoutes from './basicRoutes'
import authroutes from './authRoutes'

export default createBrowserRouter([authroutes, basicRoutes])

🤓 느낀점

페이지마다 하나씩 직접 접근을 막는것보다 가독성면에서 매우 깔끔한것을 볼수 있었다.
이를 react-router-dom V6를 통해서 공용 레이아웃도 같이 적용을 시키며 비로그인 막는것 또한 너무 좋았고
이를 바탕으로 많은 프로젝트에서도 가독성 좋은 코드를 적용시켜야겠다.