Redirect on Login and Logout

자연스로운 로그인 흐름을 완성하려면 추가적으로 두 가지 작업을 더 수행해야합니다.

로그인 한 후 사용자를 홈페이지로 리디렉션하십시오.
로그아웃 한 후 다시 로그인 페이지로 리디렉션하십시오.

React Router v6와 함께 제공되는 nav.push 메소드를 사용합니다.

로그인시 홈 화면으로 리디렉션

Login 컴포넌트는 Route를 사용하여 렌더링되기 때문에, 라우터 속성을 추가합니다. 그래서 this.props.nav.push 메쏘드를 사용하여 리디렉션할 수 있습니다.

this.props.nav("/");

src/containers/Login.js의 handleSubmit 메소드를 다음과 같이 갱신하십시오:

handleSubmit = async (event) => {
  event.preventDefault();

  try {
    await Auth.signIn(this.state.email, this.state.password);
    this.props.userHasAuthenticated(true);
    this.props.nav("/");
  } catch (e) {
    alert(e.message);
  }
};

이제 브라우저로 가서 로그인을 시도하면 로그인 한 후에 홈페이지로 리디렉션되어야합니다.

React Router v6 로그인 후 홈페이지로 리디렉션 화면

로그아웃 한 후에 로그인 화면으로 리디렉션

이제 실제와 같은 로그아웃 프로세스와 동일한 처리를 하겠습니다. 그러나 App 컴포넌트는 Route 컴포넌트 내부에서 렌더링되지 않기 때문에 라우터 속성에 직접 접근 할 수 없습니다. App 컴포넌트에서 라우터 속성을 사용하기 위해서는 withRouter Higher-Order 컴포넌트(또는 HOC)를 사용할 필요가 있습니다. 여기서에 withRouter HOC에 대한 자세한 내용을 볼 수 있습니다.

이 HOC를 사용하기 위해 App 컴포넌트를 내보내는 방식을 변경하겠습니다.

src/App.js에서 아래 행을 변경합니다.

export default App;

위 내용을 다음으로 바꿉니다.

export default withRouter(App);

그리고 src/App.js의 헤더에 있는 import {Link} 행을 다음과 같이 바꾸어 withRouter를 가져옵니다:

import { Link, withRouter } from "react-router-dom";

src/App.js에 있는 handleLogout 메소드의 맨 아래에 다음을 추가하십시오.

this.props.nav("/login");

그래서 handleLogout 메소드는 다음과 같이 보일 것입니다.

handleLogout = async event => {
  await Auth.signOut();

  this.userHasAuthenticated(false);

  this.props.nav("/login");
}

사용자가 로그아웃하면 다시 로그인 페이지로 리디렉션됩니다.

이제 브라우저로 이동하여 실제 로그아웃하면 로그인 페이지로 리디렉션되어야합니다.

로그인 호출에 약간의 지연이 있기 때문에이 호출을 테스트하는 동안 로그인 호출이 진행 중임을 사용자에게 피드백해야 할 수도 있습니다. 이어서 바로 처리 해보겠습니다.

로그인시 홈 화면으로 리디렉션

로그아웃 한 후에 로그인 화면으로 리디렉션

SST Guide