프로젝트를 진행하면서 Login 상태가 아닌 사용자의 특정 page 접근을 제어해야 했기에 그 방법을 기록하려고 한다.
App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { HomePage } from "./pages/HomePage";
import { MyPage } from "./pages/MyPage";
export const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route
path="mypage"
element={<PrivateRoute component={<MyPage />} />}
/>
</Routes>
</BrowserRouter>
);
};
export default App;
PrivateRoute.jsx
1
2
3
4
5
6
7
8
9
10
11
import React from "react";
import { Navigate } from "react-router-dom";
import { getCookie } from "./cookie";
const PrivateRoute = ({ component }) => {
const access_token = getCookie("access_token");
return access_token ? component : <Navigate to="/login" />;
};
export default PrivateRoute;
우선 나는 Login 유무를 react-cookie를 사용해 보관해 놓은 access_token을 불러와 access_token의 유무로 Login 유무를 판단했으며
access_token이 true 즉 Login 상태라면 prop으로 넘겨 받은 component prop을 그대로 return하며, access_token이 false 즉 Login 상태가 아니라면 Navigate라는 React-Router Components를 사용하여 to속성의 주소(/login)로 이동시킨다.
마치며
혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.