139. Redirecting after Logging Out
npm create vue@latest
이 강의에서는 사용자가 로그아웃할 때 리디렉션하는 방법을 배울 것입니다.
네비게이션 가드를 사용하여 인증되지 않은 사용자에 대한 리디렉션을 구현할 수 있지만, 애플리케이션에서 로그아웃하는 경우를 아직 처리하지 않았습니다.
현재 'Manage' 페이지를 보는 로그인 상태에서 로그아웃하면, 'userLoggedIn' 상태 속성이 false로 설정됩니다.
이 업데이트는 네비게이션 메뉴에 반영되지만, 페이지를 이동하거나 새로 고침하지 않는 한 'Manage' 페이지를 계속 볼 수 있습니다.
인증이 필요한 페이지에서 사용자를 리디렉션하는 것이 타당합니다.
네비게이션 가드는 라우트 변경 시에만 실행되므로 이 경우 도움이 되지 않습니다.
리디렉션을 위한 다른 접근 방법이 필요합니다.
에디터에서 헤더 컴포넌트를 열어주세요. 스크립트 블록에서 유저 스토어를 매핑합니다. 로그아웃 링크를 클릭할 때 실행될 'signOut' 액션은 애플리케이션에서 사용자를 로그아웃시키는 역할을 합니다. 로그아웃 링크를 클릭하면 이 액션을 실행하면서 사용자를 리디렉션하려 합니다. 'signOut' 함수를 정의하고, 이 함수 내에서 'this.userStore' 객체를 통해 'signOut' 액션을 실행합니다. 그 다음, 홈페이지로 리디렉션합니다. Vue는 모든 컴포넌트에 라우터 인스턴스를 주입합니다. 'this' 키워드를 통해 라우터 객체에 접근할 수 있으며, 사용자를 리디렉션하는 데 'push' 메서드를 사용합니다. 문자열 또는 객체를 전달할 수 있으며, 여기서는 이름 속성이 'home'으로 설정된 객체를 전달합니다.
로그인 상태에서 'Manage' 페이지에 접속한 후 로그아웃하면 홈페이지로 리디렉션됩니다. 콘솔에서 이전 라우트를 나타내는 객체가 로그됩니다. 우리가 관심 있는 속성은 'name'입니다. 이 속성을 사용하여 라우트를 식별할 수 있습니다. 에디터로 돌아가 콘솔 문을 주석 처리하고, 'push' 함수를 조건문으로 감쌀 것입니다. 'route.name' 속성이 'Manage'와 같은지 확인합니다. 이 조건은 사용자가 'Manage' 페이지에 있을 때 로그아웃하면 리디렉션되도록 합니다. 다른 페이지에 있으면 그대로 유지됩니다.
테스트 결과, 로그아웃 시 홈페이지로 리디렉션이 성공적으로 이루어집니다. 사용자를 리디렉션하는 것은 'push' 함수를 호출하는 것만큼 간단합니다. 가드에서는 라우터 객체에 접근할 수 없기 때문에 'next' 함수를 사용해야 했습니다. 대부분의 경우, 사용자를 리디렉션하기 위해 라우터 객체를 사용할 것입니다.
요약
- 로그아웃 시 리디렉션 배우기
- 네비게이션 가드를 통한 인증되지 않은 사용자 리디렉션 구현
- 로그아웃 시 'userLoggedIn' 상태 업데이트
- 로그아웃 후 'Manage' 페이지 지속 보이는 문제
- 인증 필요 페이지에서 사용자 리디렉션 필요성
- 네비게이션 가드의 라우트 변경 한계
- 에디터에서 헤더 컴포넌트 열기
- 유저 스토어 매핑 및 'signOut' 액션 정의
- 로그아웃 링크 클릭 시 'signOut' 함수 실행 및 홈페이지로 리디렉션
- Vue에서 라우터 인스턴스 주입 및 'push' 메서드 사용
- 로그아웃 시 홈페이지 리디렉션 및 콘솔 로그 확인
- 라우트 'name' 속성으로 라우트 식별
- 'push' 함수를 조건문으로 감싸서 특정 페이지에서만 리디렉션
- 로그아웃 시 홈페이지로의 리디렉션 테스트 성공
- 라우터 객체 사용을 통한 사용자 리디렉션 방법 설명