[ React + TypeScript ] 리엑트 권한별 페이지 접근 라우트 세팅 코드

1. 준비물
  react-router-dom

2. react-router-dom 설치

npm install react-route-dom

저는 버전을 ^6.12.1로 세팅했습니다.

 

3. 디렉터리 설정 
  - components 

  - route
      - middleware
           
4. route/allRoutes.tsx 코드 생성

import React from "react"
import { Navigate } from "react-router-dom"

// 페이지 경로
import Login from "../page/login"
import LoginChoose from "../page/loginChoose"
import LoginVerification from "../page/loginVerification"

interface RouteProps {
  path: string
  component: any
  exact?: boolean
}

// 유저 페이지 경로
const userRoutes: Array<RouteProps> = [
  { path: "/", exact: true, component: <Navigate to="/" /> },
]

const authRoutes: Array<RouteProps> = [
  //Authentication pages
  { path: "/login", component: <Login /> },
  { path: "/login/choose", component: <LoginChoose /> },
  { path: "/login/verification", component: <LoginVerification /> },
]

export { userRoutes, authRoutes }

 

5. route/middleware/Authmiddleware.tsx 코드 생성

  authUser 가 로컬스토리지에 세팅이 돼있으면 페이지 진입이 허가됩니다 없으면 로그인페이지로 튕기게 합니다.

아래의 세팅은 로컬스토리지에 값을 임의로 세팅한 소스입니다  setItem 소스를 지우게 되면 로그인 로직에서 서버로부터 응답받은 토큰값 또는 api키를 로컬스토리지 authUser키에 세팅해주어야 합니다.

import React from "react"
import { Navigate } from "react-router-dom"

const Authmiddleware = (props: any) => {
  localStorage.setItem("authUser", "1") // 임시 세팅
  if (!localStorage.getItem("authUser")) {
    return <Navigate to={{ pathname: "/login" }} />
  }
  return <React.Fragment>{props.children}</React.Fragment>
}

export default Authmiddleware

 

6. components/NoAuthLayout.tsx 코드 생성

  기본 레이아웃을 주지 않기 위함입니다.

import React from "react"
import PropTypes from "prop-types"

const NonAuthLayout = (props: any) => {
  return <React.Fragment>{props.children}</React.Fragment>
}

NonAuthLayout.propTypes = {
  children: PropTypes.any,
  location: PropTypes.object,
}

export default NonAuthLayout

6. App.tsx에 해당 코드를 세팅해 줍니다 

  세팅할 레이아웃들이 있으면 순서에 맞게 잘 세팅을 해줍니다.

 단 Authmiddleware가 페이지 진입 시 권한이 필요한컴포넌트들을 감싸고 있어야 합니다.그래야 등록된 하위 컴포넌트 페이지 진입시 권한 체크가 됩니다. header, footer, navigation과 같은 레이아웃은 따로 개발해서 적용시켜 줍니다. 없으면 안 쓰셔도 됩니다.

 

import React from "react"
import "./App.css"
import { userRoutes, authRoutes } from "./routes/allRoutes"

import Authmiddleware from "./routes/middleware/Authmiddleware"
import NonAuthLayout from "./components/NonAuthLayout"

import Header from "./layouts/header"
import Footer from "./layouts/footer"
import PageNavigation from "./layouts/navigation"
import { BrowserRouter, Routes, Route } from "react-router-dom"

function App() {
  return (
    <React.Fragment>
      <BrowserRouter>
        <Routes>
          {authRoutes.map((route, idx) => (
            <Route path={route.path} element={<NonAuthLayout>{route.component}</NonAuthLayout>} key={idx} />
          ))}

          {userRoutes.map((route, idx) => (
            <Route
              path={route.path}
              element={
                <Authmiddleware>
                  <Header />
                  <PageNavigation />
                  {route.component}
                  <Footer />
                </Authmiddleware>
              }
              key={idx}
            />
          ))}
        </Routes>
      </BrowserRouter>
    </React.Fragment>
  )
}

export default App

 

위와 같이 세팅하게 되면 권한이 필요한 페이지와 없는 페이지 진입 시 권한이 없으면 로그인 페이지로 튕기게 하는 세팅이 완성됩니다!!