138. Guarding Authentication Only Routes
npm create vue@latest
이 강의에서는 사용자가 로그인하지 않았을 경우 'Manage' 페이지에 대한 접근을 차단할 것입니다. 가드에는 한 가지 제한이 있습니다. 우리는 루트 가드 함수가 컴포넌트의 메서드와 속성에 접근할 수 없다는 것을 알아야 합니다. 이는 'beforeRouteEnter' 가드를 포함하여 'this' 키워드가 사용할 수 없다는 것을 의미합니다. 이는 컴포넌트가 아직 렌더링되거나 초기화되지 않았기 때문입니다. 네비게이션 가드는 라이프사이클 함수가 실행되기 전에 실행됩니다. 'next' 함수를 호출할 때까지 컴포넌트는 생성되지 않습니다. 이를 이해하는 것이 중요합니다. 왜냐하면 컴포넌트의 데이터에 접근하고 싶을 수 있지만, 가드가 'next' 함수를 호출할 때까지 접근할 수 없기 때문입니다. 불행하게도 이는 스토어에도 해당됩니다.
'Manage' 컴포넌트 파일에서 계속 작업할 것입니다. 상태에 접근하기 위한 대안적인 방법이 필요합니다. 다행히 스토어를 컴포넌트에 매핑하는 것은 긴급 상황에 대한 선택적 단계입니다. 스토어를 함수로 실행할 수 있습니다. 이렇게 하면 상태, 게터, 액션에 접근할 수 있는 객체를 반환합니다. 스크립트 블록의 상단에서 유저 스토어를 import 합니다. 가드에서 스토어에 접근하려면 'beforeRouteEnter' 함수 내부에 직접 import 해야 합니다. 'useUserStore' 함수의 값을 'store'라는 변수에 할당합니다.
네비게이션 가드에서 사용자가 로그인했는지 확인할 것입니다. 'next' 함수를 제거합니다. 'next' 함수를 호출하기 전에 몇 가지 검사를 수행하고자 합니다. 조건문을 생성하고 'store.userLoggedIn' 속성을 확인합니다. 로그인한 경우 'next' 함수를 호출합니다. 로그인하지 않았다면 리디렉션을 원합니다. 'next' 함수는 방문자를 리디렉션하는 데 사용할 수 있습니다. 리디렉션할 경로의 문자열을 전달하거나 더 복잡한 경로의 경우 객체를 전달할 수 있습니다. 이름으로 된 경로를 라우터가 사용하길 원하기 때문에 객체를 사용할 것이며, 'name' 속성을 'home'으로 설정한 객체를 전달할 것입니다. false를 전달하는 것도 하나의 옵션입니다. 이 값은 컴포넌트가 로드되지 않도록 합니다. 이는 함수를 전혀 호출하지 않는 것과 같습니다. 그러나 빈 페이지를 보여주고 싶지 않기 때문에 리디렉션을 선택합니다.
테스트를 해봅시다. 브라우저에서 'Manage' 페이지를 새로고침합니다. 로그인한 상태이기 때문에 페이지가 정상적으로 로드됩니다. 로그아웃한 후에 'Manage' 페이지를 새로고침하면 이번에는 홈페이지로 리디렉션됩니다. 네비게이션 가드를 사용함으로써 사용자가 적절한 권한이 없는 페이지에 대한 접근을 거부할 수 있습니다. 다음 강의에서 이를 개선하는 방법을 살펴볼 것입니다.
요약
- 사용자가 로그인하지 않았을 경우 'Manage' 페이지 접근 차단
- 가드의 제한: 루트 가드 함수는 컴포넌트의 메서드와 속성에 접근 불가
- 'beforeRouteEnter' 가드에서 'this' 키워드 사용 불가
- 컴포넌트가 렌더링되거나 초기화되기 전에 네비게이션 가드 실행
- 컴포넌트의 데이터에 접근하기 위해서는 가드가 'next' 함수를 호출해야 함
- 스토어 접근: 스토어를 컴포넌트에 매핑하는 것은 선택적
- 스토어를 함수로 실행하여 상태, 게터, 액션에 접근
- 'Manage' 컴포넌트 파일에서 작업
- 'useUserStore' 함수 사용하여 스토어 import 및 변수 할당
- 네비게이션 가드에서 로그인 상태 확인
- 사용자가 로그인하지 않았다면 홈페이지로 리디렉션
- 'next' 함수로 리디렉션 경로 설정
- 테스트 결과: 로그인 상태에서는 'Manage' 페이지 정상 접근, 로그아웃 상태에서는 홈페이지로 리디렉션
- 다음 강의에서 접근 제한 방법 개선 예정