[React] 리다이렉트를 이용한 로그인 후 이전 페이지 이동

만약 링크를 통해 웹 페이지에 접근할 때 해당 페이지에서 로그인 정보가 필요하다면 로그인 페이지로 바로 이동시켜준다.

로그인을 성공하게 되었을 때 처음 링크를 통해 접근한 페이지로 이동하는 방법을 적어두려 합니다.

 

여기서 소개하는 방법이 정답이라고 할 수는 없으니 다른 방법을 아시는 분 있으면 댓글에 알려주시면 감사하겠습니다.

 

---

사용한 기술스택

• react
• react-router-dom V6
• js-cookie

 

로직 순서

1. private 페이지(로그인이 필요한 페이지)에 접근했을 때 cookie를 통한 유저 token 확인
2. cookie에 유저 token이 없는 것을 확인
3. 로그인 페이지로 이동하기 전 현재의 path를 useNavigate의 state로 저장 후 로그인 페이지로 이동
4. 로그인 실행
5. useNavigate의 state가 존재할 때 해당 state에 저장된 path값으로 페이지 이동

 

Router

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PulicLayout />}>
          <Route path="/" element={<LoginPage />} />
        </Route>
        <Route element={<AuthLayout />}>
          <Route path="/auth" element={<AuthPage />} />
          <Route path="/auth2" element={<AuthPage2 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

LoginPage는 pulic 한 페이지로서 token 없이 접근할 수 있는 페이지다.

AuthPage, AuthPage2는 LoginPage와 반대로 private 한 페이지로서 token이 있어야 접근 할 수 있는 페이지다.

 

AuthLayout

import React, { useEffect } from "react";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
import Cookies from "js-cookie";

const AuthLayout = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  useEffect(() => {
    if (!Cookies.get("id")) {
      navigate("/", { state: pathname });
    }
  }, []);

  return (
    <div>
      <Outlet />
    </div>
  );
};

export default AuthLayout;

private한 페이지에 접근하면 AuthLayout의 useEffect를 통해서 cookie에 token이 있는지 확인한다.

만약 token이 없다면 useNavigate를 이용해 로그인 페이지로 이동하며 첫 번째 인수로 state의 값으로 현재의 pathname을 저장한다.

 

Login Page

import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import Cookies from "js-cookie";

const LoginPage = () => {
  const navigate = useNavigate();
  const { state } = useLocation();

  const handleLogin = () => {
    Cookies.set("id", "id");

    if (state) {
      navigate(state);
    } else {
      navigate("/auth");
    }
  };

  return (
    <div>
      <form>
        <input />
        <input type="password" />
        <button onClick={handleLogin}>button</button>
      </form>
    </div>
  );
};

export default LoginPage;

LoginPage에서 useLocation의 state 값을 확인한다.

로그인을 시도할 때 만약 state에 값이 있다면 useNavigate에 state값을 이용해서 해당 페이지로 이동하도록 한다.

state에 값이 없다면 로그인 후 이동할 페이지를 고정으로 설정해두면 된다.

 

 

 

 

간단하게 만들어 보았는데 위에서 말한 것처럼 이 방법이 정답은 아니다.

localstorage, 전역 상태 등 여러 방법을 사용할 수 있을 것 같다.