도메인 이동 막기

드디어, 기능 구현의 마지막 단계!
로그인을 하지 않으면 어떤 도메인에 접근해도 반드시 로그인 페이지가 나타나게 만든다.

상세 기능

• 로그인 하지 않은 사용자는 로그인 페이지에만 접근 가능

고민

로그인 여부를 검사하는 ProtectedRoute 컴포넌트를 만들고, 도메인 이동을 막아야 하는 페이지들에게 이 컴포넌트를 씌우는 방시긍로 간단히 구현할 수 있을거라고 생각했는데 생각외로 쉽게 풀리지 않았다.

띠용? user정보가 있는데 없습니다

메뉴 링크를 통해서 페이지를 이동할 땐 아무 문제가 없었는데, 주소창에 url을 직접 입력할 때 문제가 생겼다.

url을 직접 입력하면 분명 로그인을 한 상태인데도 불구하고 로그인 페이지로 돌아가는 것이다.

왜이런가 싶어서 콘솔로 user값을 출력해보았더니 url을 통해 페이지를 이동할 때 처음엔 user정보가 undefined로 뜨고 그 후 정보가 반영되었다. url로 페이지를 이동하면 새로고침이 되면서 user정보를 즉각적으로 받아오지 못하고 딜레이가 생기기 때문인 것 같았다.

어떻게 처리하면 좋을지 고민을하다가 로그인을 안해서 user정보가 없을 경우에는 null로 뜬다는걸 알았고, if문을 통해 user===null 일때만 로그인 페이지로 이동되도록 처리해주었다.

지금은 이렇게 두었지만 이후 react-query 등을 이용한 캐싱 작업으로 if문을 안써도 되도록 해결할 수 있지 않을까 싶다.

구현

index

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      {
        index: true,
        element: (
    	// ProtectedRoute컴포넌트를 씌워준다
          <ProtectedRoute>
            <Home />
          </ProtectedRoute>
        ),
      },
      {
        path: "search",
        element: (
          <ProtectedRoute>
            <Search />
          </ProtectedRoute>
        ),
      },
      {
        path: "community",
        element: (
          <ProtectedRoute>
            <Community />
          </ProtectedRoute>
        ),
      },
      {
        path: "my_pick",
        element: (
          <ProtectedRoute>
            <Pick />
          </ProtectedRoute>
        ),
      },
      { path: "sign_in", element: <SignIn /> },
      { path: "sign_up", element: <SignUp /> },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthProvider>
    <Provider store={store}>
      <RouterProvider router={router}>
        <App />
      </RouterProvider>
    </Provider>
  </AuthProvider>
);

ProtectedRoute

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuthContext } from "../store/auth/AuthContext";

export default function ProtectedRoute({ children }) {
  const { user } = useAuthContext();
  const navigate = useNavigate();
  
  useEffect(() => {
    if (user === null) {
      navigate("/sign_in");
    }
  }, [user]);
  return children;
}

+) 로그인했을 때 / 경로로 이동되지 않는 문제를 발견했다. 로그인 기능은 유저가 처음 만나게 되는 기능이므로 가장 먼저 수정해야 할 것 같다.