자동로그인 시 리디렉션 문제

[andhl204]

현재 자동로그인을 구현하기 위해 로컬스토리지에 토큰 값을 저장해놓고, TokenContext.js에서 관리하는 방식을 이용하고 있습니다.

TokenContext.js

const [token, setToken] = useState(null);
useEffect(() => {
    const item = localStorage.getItem("token");
    setToken(item);
}, []);

LoggedOutRoute.js

const LoggedOutRoute = ({ children, ...props }) => {
  const { token } = useTokenContext();
  // 로그인되어있는데 /login으로 가려고 하는 경우에는 /students로 리디렉션
  return (
    <Route
      {...props}
      render={({ location }) =>
        !token ? (
          children
         ) : (
        <Redirect
          to={{
            pathname: "/students",
            state: { from: location },
          }}
        />
      )
    }
  />
);
};

LoggedInRoute.js

const LoggedInRoute = ({ children, ...props }) => {
  const { token } = useTokenContext();
  // 로그인되어있지 않은 경우에는 /login으로 리디렉션
  return (
    <Route
      {...props}
      render={({ location }) =>
        token ? (
	  children
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: location } }}
          />
        )
      }
    />
  );
};

App.js

const { token } = useTokenContext();
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

<BrowserRouter>
	<Switch>
		{/* 로그인된 경우에만 /students로 이동 가능 */}
		<LoggedInRoute path="/students">
			<Home />
		</LoggedInRoute>
		{/* 로그인된 경우에만 /student/:id로 이동 가능 */}
		<LoggedInRoute path="/student/:id">
			<DetailedView />
		</LoggedInRoute>
		{/* 로그인된 경우/login으로 이동 불가 */}
		<LoggedOutRoute path="/login">
			<LoginPage />
		</LoggedOutRoute>
		{/* 존재하지 않는 url일 경우 /students로 리디렉션 */}
		<Redirect to={{ pathname: "/students" }} />
	</Switch>
</BrowserRouter>

그런데 /students/:id을 직접 입력하거나 새로고침을 할 때, 로컬 스토리지에 token이 있는 상태인데 /login을 거쳐 다시 /students로 돌아가는 문제가 있습니다. /students를 직접 입력해도, /login을 거쳐서 다시 /students로 돌아오게 됩니다.
LoggedInRoute.js, LoggedOutRoute.js, App.js에서 token을 로컬스토리지에서 직접 가져오면 리디렉션 문제가 없습니다. context에서 로컬스토리지의 토큰 값을 저장할 때 시간이 걸리기 때문에 이런 문제가 있는 걸까요?

[woohm402]

useEffect 는 한 차례 렌더가 된 다음 실행됩니다.

console.log('a');

useEffect(() => {
  console.log('b');
}, []);

console.log('c');

위 코드 실행 결과는 a -> b -> c 가 아닌 a -> c -> b 입니다. 즉 스토리지에서 토큰값을 불러오기 전에 렌더가 먼저 진행되고, <Redirect를 먼저 만나게 되고, 로그인으로 리다이렉트가 먼저 됩니다. 뒤이어 useEffect가 토큰값을 받아와서 로그인되었다는 걸 알게 된 후 다시 /students로 리다이렉트되게 됩니다.

#541 과 #542 도 비슷한 고민이 있는 질문이었어서, 참고해보시면 좋을 것 같네요 :)

이를 해결하기 위해서 저는 토큰 상태를 truthy falsy 두 개로 나누지 않고, undefined string null 세 개로 나누는 방식을 선호합니다. undefined일 경우는 첫 렌더라는 뜻이고 아직 토큰 정보를 모른다는 상태로 보고 처리합니다!

[subir-sh]

저도 똑같은 문제가 있었는데 3개로 나누니까 잘 되네요 👍

[andhl204]

감사합니다! 해결되었습니다😆