[React] 보안 라우터

보안 라우터 사용이유

React로 웹페이지 개발을 진행하다 보면 로그인 보안처리가 필요한 웹페이지를 개발할 때가 옵니다.

보통의 프론트엔드 개발자들은 페이지의 동작과정을 알기 때문에 주소에 직접 번호를 작성하거나 특정 글자를 작성하여 페이지 이동을 실시할 수 있습니다.

 

가장 간단한 예시로 꼬맨틀이 있습니다.
꼬맨틀의 경우 단어 유사도를 이용해 해당 단어가 무엇인지 알아내는 간단한 게임인데 약간의 꼼수가 존재합니다.

 

여기서 주소 뒤에 1038이 적혀있는데 해당 숫자를 1큰 숫자로 바꾸면 다음날 정답 단어가 됩니다.

 

이렇게 주소에 특정 문자나 숫자를 직접 작성하여 페이지 이동을 하는 방법이 있는데, 개발 중인 웹페이지에서 허가되지 않은 사용자가 페이지에 접근하면 문제가 발생하기 때문에 이를 방지하기 위해 보안라우터를 작성하는 것입니다.

---

보안 라우터 작성 방법 (with. react-router-dom, recoil)

 

그렇다면 이제 react-router-dom을 활용하여 보안라우터를 작성하는 방법에 대해 알아보겠습니다.

 

우선 react-router-dom은 SPA 페이지에서 사용자 경험을 향상하기 위해 React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어 주는 라이브러리입니다.

 

npm i react-router-dom 또는 mac의 경우 yarn add react-router-dom 으로 설치하고 초기 세팅이 필요합니다.

import {BrowserRouter, Routes, Route} from "react-router-dom"

 

해당 키워드를 통해 라이브러리 사용을 위한 기본 키워드들을 import 해줍니다.

 

1. BrowserRouter

• history API를 활용해 history 객체를 생성합니다.
• history API는 내부적으로 stack 자료구조를 가지기 때문에 사용자가 방문한 url 기록들을 저장합니다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성해 감싸주어야 합니다.

2. Route

• 현재 브라우저의 정보를 가져옵니다. 상태에 따라 다른 element를 렌더링 합니다.
• Route.element 는 조건이 맞을 때 렌더링할 element입니다.
• Route.path 현재 path 값이 url과 일치하는지 확인 후 해당 url에 매칭된 element를 렌더링 해줍니다.

3. Routes

• 모든 Route의 상위 경로에 존재해야 합니다.
• location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아줍니다.

---

이제 작성한 키워드를 React 페이지에 맞춰 사용해 주어야 합니다.

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<GalleryPage />} />
          <Route path="/gallery" element={<DetailCardPage />}>
          <Route path=":cardId" element={<DetailCard />} />
        </Routes>
    </BrowserRouter>
  );
};

 

위 예시 코드처럼 path를 활용하여 페이지 라우팅 처리를 자주 사용하는데

 

여기서 path만 알고 있다면 특정 페이지에 임의로 접근이 가능하다는 문제점이 발생합니다.

 

이를 보완하는 방법이 PrivateRoute를 직접 만드는 것입니다.

---

PrivateRoute 만들기

import { Navigate } from "react-router-dom"
const { useRecoilValue } = require("recoil")
const { loginState } = require("~~~유저 로그인 정보 담긴 토큰 페이지 주소")

const PrivateRoute = ({ children }) => {
  const token = useRecoilValue(loginState)
  return token ? children : <Navigate to = "/">
}

export default PrivateRoute

 

간단하게 token 값과 react-router-dom을 활용한 PrivateRoute를 작성해 보았습니다.

 

동작 원리는 다음과 같습니다.

 

라우팅 처리가 필요한 곳에 PrivateRoute 컴포넌트를 다른 컴포넌트 상위로 감싸 해당 컴포넌트의 정보를 받는 것입니다.

 

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
            <PrivateRoute>
                  <Route path="/" element={<GalleryPage />} />
            </PrivateRoute>
        </Routes>
    </BrowserRouter>
  );
};

 

이렇게 라우팅 처리가 일어날 때 보안라우터로 라우터를 감싸주었습니다.

 

그렇다면 감싸진 컴포넌트에 접근하기 위해선 우선 보안라우터로 접근을 하여야 하는데

 

사용자가 로그인을 한 상태라면 token값이 존재할 것입니다.

 

이 token값을 토대로 token값이 존재하는 경우 사용자가 접근하려는 children으로 페이지 라우팅을 처리하고

 

token값이 없다면 사용자를 루트 경로로 리다이렉트 하는 것입니다.

 

간단한 설정이지만 token값 여부를 통해 페이지 접근을 막기 때문에 인증 상태에 따라 페이지 접근을 제어하는 좋은 방법입니다.