React Router 사용자 인증 (로그인/로그아웃)

인증이 필요한 컴포넌트

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

React Router로 사용자 인증하기 (로그인/로그아웃)

history.push vs history.replace

히스토리는 stack으로 쌓인다. 여기에 push는 history 제일 위에 쌓고, replace는 history 제일 위에 있는 원소를 지금 넣을 원소로 바꾸는 것이다.

 const submitLogin = (e, username, password) => {
    e.preventDefault();
    authService.login(username, password).then((user) => {
      setUser(user);
      history.push('/home');
    });

위와 같이 history.push('/home')으로 한다면
홈 => 로그인 => home으로 쌓이게 된다.

 const submitLogin = (e, username, password) => {
    e.preventDefault();
    authService.login(username, password).then((user) => {
      setUser(user);
      history.replace('/home');
    });

하지만 history.replace('/home')으로 한다면,
홈 => home으로 쌓이게 된다.

즉, 로그인 후에 뒤로 가기를 하면 로그인페이지로 다시 가지 않게 되는 것이다.

히스토리를 남기고 싶다면 push를 사용하고, 로그인한 유저가 /login에 재접근하지 않도록 하기위해 replace를 사용하면 된다.

Redirect

The new location will override the current location in the history stack.

<Route path='/login'>
    {user ? <Redirect to='/home' /> : <Login submitLogin={submitLogin} />}
</Route>

위와 같이 유효한 user라면 /home으로 redirect된다. /login으로 접근한 location은 /home으로 override된다.