[React] React Router 페이지 접근 권한

페이지마다 인증이 필요한 경우, 권한이 필요한 경우 등의 구분이 필요하다.

 

이를 쉽게 해결해주기 위한 방법이 리액트에서 라우팅을 해줄때 페이지별로 접근 권한을 설정해주는 방법이다.

 

이 방법을 쉽게 요약하면,

권한이 필요한 페이지를 요청하면 →  Context등을 이용하여 로그인 인증 정보를 전달받는다 → 전달받은 데이터가 조건에 부합하면 하위 페이지를 랜더링 해준다.

의 순으로 진행된다.

 

일단 평범한 라우터 구성 파일의 일부이다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from '.pages/Login';
import Home from '.pages/Home';
import MyPage from '.pages/MyPage';

const App = () => {
    return (
    	<BrowserRouter>
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/mypage" element={<MyPage />} />
            </Routes>
        </BrowserRouter>
    )
}

export default App;

 

이렇게하면 기본적인 기능은 하지만, 앞서 말한 것처럼 <MyPage /> 와 같은 접근 권한이 필요한 페이지에 대한 처리가 불가능하다.

 

먼저, 지금처럼 누구나 접근 가능한 상태가 아닌 접근 제한을 가진 페이지로 수정해준다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from '.pages/Login';
import Home from '.pages/Home';
import MyPage from '.pages/MyPage';

const App = () => {
    return (
    	<BrowserRouter>
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/mypage" element={<ProtextedRoute><MyPage /></ProtextedRoute>} />
            </Routes>
        </BrowserRouter>
    )
}

export default App;

이렇게 바로 랜더링 되지 않고 <ProtextedRoute>를 통해 권한을 확인할 수 있도록 한다.

이제 <ProtextedRoute>가 필요하다.

 

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { isAuthenticated } from './context/AuthContext';
import Login from '.pages/Login';
import Home from '.pages/Home';
import MyPage from '.pages/MyPage';

const ProtectedRoute = ({children}) => {
  const { isAuthenticated } = useContext(AuthContext);

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return children; // 권한이 있다면 해당 컴포넌트를 렌더링
};

const App = () => {
    return (
    	<BrowserRouter>
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/mypage" element={<ProtextedRoute><MyPage /></ProtextedRoute>} />
            </Routes>
        </BrowserRouter>
    )
}

export default App;

이런 식으로 컴포넌트 안에서 필요한 데이터를 불러와 권한(조건)을 확인하고 부합하면 랜더링하도록 한다.

 

참고로 children을 통해서 하위 컴포넌트(ex. <MyPage />)등을 받는다.

 

물론, 클라이언트 측에서의 접근 제한을 이용한 보안이고 서버 측에서도 보안을 위한 처리가 필요하다.