이번 프로젝트에선 페이지 이동 처리를 위해 **리액트 라우터(React Router)**를 이용했습니다.

그러나 마이페이지, 팀 관리 페이지와 같이 권한이 필요한 페이지들에 권한이 없는 사용자가 접근할 수 있는 문제가 발생했습니다. 이를 해결하기 위해 저희는 아래와 같은 과정을 거쳐 Protected Route 개념을 도입하였습니다.

1. Protected 컴포넌트 구현

import React from 'react'
import { Navigate } from 'react-router-dom'
function Protected({ isAuthenticated, link, children }) {
  if (!isAuthenticated) {
    return <Navigate to={link} replace />
  }
  return children
}
export default Protected

Protected 컴포넌트는 전달받은 권한 여부에 따라 특정 주소로의 리다이렉션 또는 렌더링할 컴포넌트를 반환하도록 설정했습니다.

컴포넌트 호출시 인증 여부와 인증 실패시 리다이렉트할 링크를 prop으로 전달받고, 자식요소로 가지고있는 컴포넌트를 children prop을 통해 전달받아 인증 성공시 렌더링할 컴포넌트로 사용합니다.

2. 페이지 이동을 위한 React Router 연동

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import LoginPage from './LoginPage';
import MyPage from './MyPage';
import Protected from './Protected';

const App = () => {
  const isAuthenticated = () => {
    // 인증용 함수 구현할 위치
    return false; // 인증 결과값 리턴
  };

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
            path="/mypage"
            element={
              <Protected isAuthenticated={isAuthenticated()} link='/login'>
                <MyPage />
              </Protected> 
            }
          />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

만약 권한이 필요한 페이지에 Route 요청이 들어왔을 경우, 별도로 생성해둔 Protected 컴포넌트를 거쳐 인증 여부가 확인되었을 때만 해당 페이지에 맞는 컴포넌트를 렌더링하도록 설정했습니다.

이를 통해 권한이 없는 유저가 url을 통해 직접 접근했을 때도 페이지가 렌더링 되는 일 없이 적절한 위치로 리다이렉트 시켜줄 수 있게 되었습니다.

단, 실제 동작 시 페이지에 맞는 인증 용 함수는 따로 구현해줘야 합니다.