Redirect를 이용한 Route 페이지 접근 제한

클론 코딩 프로젝트를 진행하면서 로그인페이지에서 로그인을 하면 다시 로그인페이지로 넘어갈 필요가 없기 때문에 로그인페이지로 접근하는 것을 제한할 필요가 있었다.

그래서 로그인시 토큰을 서버에서 받아와 쿠키를 생성하면 로그인, 회원가입 페이지로 접근 할 수 없고 메인페이지로만 가게 하는 기능을 Redirection을 이용하여 구현하였다.

import React from "react";
import { Redirect, Route } from "react-router";
import { ConnectedRouter } from "connected-react-router";

import { Cookies } from "react-cookie";

import PostModal from "./components/PostModal";
import { Login, Signup, Main } from "./pages/index";

function App() {
  const cookies = new Cookies();
  const loginState = cookies.get("is_login");

  return (
    <ConnectedRouter history={history}>
      <Route path="/" exact component={Main}>
        {!loginState ? <Redirect to="/login" /> : <Main />}
      </Route>
      <Route path="/login" exact component={Login}>
        {loginState ? <Redirect to="/" /> : null}
      </Route>
      <Route path="/signup" exact component={Signup}>
        {loginState ? <Redirect to="/" /> : null}
      </Route>
      <Route path="/postmodal" exact component={PostModal} />
    </ConnectedRouter>
  );
}

react-router-dom 을 이용하여 Route하는 방식으로 페이지 이동이 가능한 상태이다. 쿠키에 is_login을 true 값을 줘서 쿠키의 유무에 따라 페이징 처리를 다르게 하였다.

출처:
https://reactrouter.com/web/api/Redirect