React 의 보안 라우터

개발을 진행하다 보면 Login 기능을 이용하여 페이지를 라우팅 처리하는 경험이 있습니다.

이때 페이지의 라우팅과 관련하여 사용자가 페이지 동작과정을 알고있다면 주소에 직접 번호를 작성하거나 특정 글자를 작성하여 페이지 이동을 실시할 수 도 있습니다.

이를 악용한다면 특정 유저의 페이지에 접근하여 개인정보를 습득하거나 관리자만 접근이 가능한 페이지에 접근하는등의 문제점이 발생할 수 있습니다.

이를 해결하기 위해서는 사용자 인증에 따른 라우팅 처리가 필요합니다.

---

PrivateRoute

• React 프로젝트를 진행하며 페이지 라우팅 처리를 위해 react-router-dom 을 활용하여 페이지 라우팅처리를 실시해 본적이 있습니다.

react-router-dom 이란

React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리

npm i react-router-dom 을 통해서 설치가 가능합니다.

설치후 사용을 위해서는 import {BrowserRouter, Routes, Route } from "react-router-dom"
를 통해서 사용이 가능합니다.

해당 라이브러리를 활용하면

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

위와같은 코드를 활용하여 path를 통해 페이지 라우팅 처리가 가능합니다.

react-router-dom 에서 페이지 라우팅을 위해서 최상단 태그에 BrowserRouter 을 사용해 주어야 합니다. 이후 페이지 라우팅 처리를 위해서 Routes 속 Route 를 통해 라우팅 되는 페이지들을 구분해 줍니다.

그러나 path만 알고있다면 특정 페이지에 임의로 접근이 가능하다는 문제점이 있습니다. 이를 보완하기 위해서 PrivateRoute를 이용하였습니다.

---

PrivateRouter 를 이용하여 페이지 보안 처리하기

import { Navigate } from "react-router-dom"
const { useRecoilValue } = require("recoil")
const { loginState } = require("./user/components/Atom/loginState")

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

해당 코드는 실제 프로젝트에서 사용하였던 PrivateRoute 입니다.

React 에서는 children Props를 통해서 특정 페이지를 라우팅 처리를 실시할 수 있습니다.

이 코드는 삼항연산자를 활용하여 token 여부에 따라 children 으로 보여지는 페이지를 나누어 준 코드입니다.

이후 페이지의 라우팅 처리를 위해 조금만 추가하여 주면 됩니다.

---

<Route
	path="/home"
	element={[
		<PrivateRoute>
			<Home />
		</PrivateRoute>
		]}
/>

라우팅 되는 페이지는 element를 통해 페이지를 불러와 주는데 이곳에 PrivateRoute를 추가해 주면 됩니다.

element 에서 페이지를 불러올때 PrivateRoute 페이지를 거쳐 children 으로 Home 페이지를 불러옵니다.

PrivateRoute 에서는 페이지 진입시 login 여부에 따라 페이지를 라우팅 해주었습니다.

해당 코드를 통해 URL 직접 접근을 막아 페이지 라우팅 보안이 가능하였습니다.