137. Route Specific Guards
npm create vue@latest
이 강의에서는 특정 라우트에 가드를 적용하는 방법을 살펴볼 것입니다. 가드를 적용하는 첫 번째 옵션은 전역 가드입니다. 이는 모든 라우트에 대한 검사를 수행하고 싶을 때 좋은 방법이지만, 우리의 경우에는 과도합니다. 그래서 두 번째 옵션을 살펴보겠습니다. 특정 라우트에 가드를 추가할 수 있습니다. 에디터로 돌아가 'to'와 'from' 매개변수에 대한 콘솔 문을 전역 가드에서 제거하겠습니다. 이제 더 이상 매개변수를 로그할 필요가 없기 때문입니다. Vue 개발자 도구가 어차피 정보를 로그할 것이므로, 수동으로 매개변수를 로그하는 것보다 개발자 도구를 사용하는 것을 선호합니다. 함수 내의 메시지는 예시를 위해 남겨두겠습니다.
특정 라우트에 가드를 적용하려면 레코드에 'beforeEnter' 속성을 정의합니다. 'Manage' 레코드에 이 속성을 추가할 것입니다. 이 값은 함수여야 하며, 화살표 함수를 사용할 것입니다. 전역 가드와 마찬가지로 같은 세 가지 매개변수('to', 'from', 'next')를 사용할 것입니다. 함수 내에서는 가드가 작동한다는 메시지를 로그할 것입니다. 그 후에 라우터가 컴포넌트를 렌더링하도록 'next' 함수를 호출할 것입니다. 레코드에 가드를 정의하는 주요 이점은 해당 라우트가 방문될 때 가드가 실행된다는 것입니다.
브라우저에서 테스트해 보겠습니다. 앱의 홈페이지를 로드합니다. 아직 로그인하지 않았다면 로그인하세요. 로그인 후 'Manage' 페이지로 이동합니다. 콘솔에는 가드 함수에서 온 세 개의 로그가 있습니다. 처음 두 개는 전역 가드에서 온 것이고, 하나는 홈페이지용, 다른 하나는 'Manage' 페이지용입니다. 세 번째 로그는 'Manage' 레코드의 가드에서 온 것입니다. 가드는 해당 라우트가 방문될 때만 실행됩니다.
가드를 정의하는 마지막 옵션을 살펴보겠습니다. 컴포넌트에서 가드를 정의할 수 있습니다. 라우터 파일에서 계속 정의할 필요가 없습니다. 에디터로 돌아가 'Manage' 컴포넌트 파일을 엽니다. 먼저 'scripts' 블록을 추가합니다. 이 'scripts' 블록 내에서 객체를 export하고, 'name' 속성을 추가하여 'Manage'라고 이름을 지정합니다. export된 객체 내에서 'beforeRouteEnter' 메서드를 정의합니다. 이 메서드가 컴포넌트에 존재하면 라우터는 컴포넌트를 렌더링하기 전에 이를 실행합니다. 이전 가드 함수처럼 'to', 'from', 'next' 매개변수에 접근할 수 있습니다. 함수 내에서 가드가 실행될 때 메시지를 로그하고, 'next' 함수를 호출할 것입니다.
브라우저에서 페이지를 새로 고칩니다. 'next' 함수를 호출하기 때문에 모든 것이 여전히 작동합니다. 'next' 함수 호출은 라우터가 컴포넌트를 렌더링하도록 하는 데 매우 중요합니다. 그렇지 않으면 빈 페이지로 인사하게 됩니다. 콘솔에서 세 가지 가드의 메시지를 찾을 수 있습니다. 메시지의 순서를 지적하고 싶습니다. 페이지를 새로 고칠 때마다 순서는 항상 같습니다. 이것은 실수가 아닙니다. 가드는 매우 특정한 순서로 실행됩니다. 앞서 언급한 문서 페이지로 돌아가 맨 아래로 스크롤합니다. 'Resolution Flow'라는 섹션을 찾을 수 있습니다. 이 문서의 부분은 가드 함수가 실행되는 순서에 대해 설명합니다. 우리가 이전에 논의한 것보다 더 많은 것이 진행됩니다. 라우터는 내비게이션 이벤트 중에 코드를 실행할 수 있는 다양한 방법을 제공합니다. 같은 라우트에 여러 가드가 적용된 경우 이 순서를 아는 것이 중요할 수 있습니다.
이제 어떤 가드를 사용해야 할까요? 일반적으로, 모든 요청 전에 어떤 코드를 실행하고 싶다면 전역 가드가 좋습니다. 그렇지 않다면 더 구체적인 가드 함수를 사용하는 것이 좋습니다. 어느 것이든 작동합니다. 모두 선호에 따라 다릅니다. 저는 컴포넌트에서 가드를 정의하는 것을 선호합니다. 이렇게 하면 라우터 파일의 혼잡함이 줄어듭니다. 다음 강의에서는 배운 지식을 사용하여 'Manage' 페이지에 대한 접근을 제한하는 방법을 살펴볼 것입니다.
요약
- 특정 라우트에 가드 적용 방법 탐구
- 첫 번째 옵션: 전역 가드
- 모든 라우트에 대한 검사 수행
- 과도한 경우 있음
- 두 번째 옵션: 특정 라우트에 가드 추가
- 'beforeEnter' 속성을 라우트 레코드에 정의
- 특정 라우트 방문 시에만 가드 실행
- 브라우저에서 테스트 진행
- 'Manage' 페이지에 대한 가드 실행 확인
- 세 번째 옵션: 컴포넌트에서 가드 정의
- 라우터 파일 대신 컴포넌트 파일에서 가드 정의
- 'beforeRouteEnter' 메서드 사용
- 컴포넌트 렌더링 전에 실행됨
- 전역 가드 대신 컴포넌트에서 가드 정의하는 것 선호
- 라우터 파일의 혼잡 줄임
- 가드 실행 순서 중요
- 문서 페이지의 'Resolution Flow' 섹션 참조
- 다음 강의에서 'Manage' 페이지 접근 제한 방법 살펴볼 예정