136. Guarding Routes
npm create vue@latest
이 강의에서는 네비게이션 가드를 사용하여 라우트를 보호하는 방법에 대해 논의할 것입니다. 라우트를 보호한다는 것은 사용자가 적절한 권한이 없으면 특정 라우트에 접근하는 것을 막는 것을 의미합니다. 이 강의의 리소스 섹션에서는 네비게이션 가드 문서 페이지로의 링크를 제공합니다. 이 페이지에서는 라우트를 보호하는 방법에 대해 자세히 설명합니다. '가드'라는 용어는 컴포넌트를 렌더링하기 전에 요청에 대한 검사를 수행할 수 있는 능력을 의미합니다. 가드는 함수로 정의됩니다. 이 경우, 사용자가 특정 페이지로 이동하기 전에 함수를 실행할 수 있습니다. 우리는 본질적으로 페이지를 보호하고 있습니다.
이것이 어떻게 이루어지는지 살펴보겠습니다. 우리 애플리케이션에는 'Manage'라는 페이지가 있습니다. 사용자가 로그인되어 있으면 접근할 수 있습니다. 사용자가 로그인하지 않았다면 'Manage' 페이지 링크를 볼 수 없습니다. 그러나 사용자가 주소 표시줄에서 URL을 직접 방문하면 여전히 페이지에 접근할 수 있습니다. 로그아웃한 상태에서 'Manage' 페이지를 방문하겠습니다. 로그아웃했음에도 불구하고 여전히 페이지에 접근할 수 있습니다. 이는 우리가 사용자가 음악을 업로드하고 관리하기 위해 로그인해야 한다는 원칙을 가지고 있기 때문에 발생해서는 안 됩니다. 인증되지 않은 사용자에 의해 이 페이지가 접근되는 것을 막기 위해, 우리는 사용자의 인증 상태를 확인할 것입니다. 인증된 경우 페이지에 접근을 허용할 것입니다.
Vue 라우터는 이 문제를 해결하기 위해 세 가지 옵션을 제공합니다. 모두 살펴보겠습니다. 첫 번째 옵션은 전역 가드입니다. 이는 에디터에서 모든 라우트에 대해 실행되는 가드입니다. 라우터 파일을 열고 라우터 변수를 정의한 후, 'beforeEach' 함수를 호출합니다. 'beforeEach' 함수는 라우터 인스턴스가 생성된 후 사용할 수 있으며, 모든 요청 전에 함수를 추가할 수 있게 해줍니다. 이 가드는 우리 애플리케이션에 등록된 모든 라우트에 적용됩니다. 이를 통해 사용자나 다른 것에 대한 검사를 수행할 수 있습니다. 원하는 것을 할 수 있습니다. 이것은 하나의 인수를 가지며, 콜백 함수입니다. 요청이 있을 때마다 이 함수를 호출할 수 있습니다. 우리는 화살표 함수를 인수로 전달할 것입니다. 콜백 함수는 세 개의 매개변수를 받을 수 있습니다. 'to', 'from', 'next' 매개변수를 우리 콜백 함수에서 받을 것입니다. 'to' 매개변수는 사용자가 이동하려는 곳에 대한 정보를 포함하는 객체이며, 반대로 'from' 매개변수는 사용자가 이동해 온 곳에 대한 정보를 포함하는 객체입니다. 'next' 매개변수는 함수입니다. 이 매개변수가 가장 중요합니다. 이 함수를 호출하기 전까지는 라우터가 컴포넌트를 렌더링하지 않습니다. 이 함수가 결코 호출되지 않으면 컴포넌트는 절대로 로드되지 않습니다. 이론적으로, 사용자가 페이지에 접근하는 것을 막고 싶다면 이 함수를 결코 호출해서는 안 됩니다. 로직을 작성하기 전에 'to'와 'from' 매개변수를 로그해보겠습니다. 전역 가드가 작동하는지 확인하기 위해 매개변수를 로그하고 있습니다. 또 다른 로그 문에서는 이것이 전역 가드에서 온 것임을 알려주는 메시지를 로그할 것입니다. 마지막으로 컴포넌트가 렌더링되는 것을 막지 않기 위해 'next' 함수를 호출할 것입니다. 변경 사항을 저장한 후 브라우저로 가서 콘솔을 확인해보세요. 가드 함수가 호출되었음을 로그 문이 콘솔에 나타나는 것으로 확인할 수 있습니다. 가드 함수는 초기 요청을 포함하여 모든 요청에 대해 실행됩니다. 콘솔에 로그된 두 객체가 있습니다. 전역 가드가 예상대로 작동하고 있습니다. 이동하기 전에, 로그하는 매개변수는 개발자 도구에서 찾을 수 있지만, 상황에 따라 객체를 직접 로그하는 것이 좋을 수도 있습니다. 콘솔과 개발자 도구의 차이점은 콘솔이 더 많은 정보를 로그할 수 있다는 것입니다. 예를 들어, 콘솔의 객체 중 하나에는 'hash'라는 속성이 있습니다. 'hash' 속성은 URL에서 해시 문자(#) 뒤의 값을 나타냅니다. 개발자 도구는 일반적으로 데이터가 비어있으면 표시하지 않습니다. 따라서 무엇인가 놓치고 있다고 생각하지 않아도 됩니다. 이것은 정상입니다. 애플리케이션을 탐색할 때마다 전역 가드가 모든 요청에 대해 지속적으로 호출됩니다. 이것은 콘솔의 로그에 의해 나타납니다. 모든 라우트 요청에 대해 검사를 수행하고 싶다면 훌륭합니다. 하지만 우리의 경우에는 인증이 필요한 페이지에 대한 방문자의 접근을 막고 싶기 때문에 과도합니다. 이 검사가 필요 없는 페이지에 대해서는 처음부터 수행할 필요가 없습니다. 다음 강의에서 특정 라우트에 가드를 적용하는 방법을 살펴볼 것입니다.
요약
- 네비게이션 가드를 사용하여 라우트 보호 방법 논의
- 라우트 보호는 적절한 권한이 없는 사용자의 접근을 막는 것
- 네비게이션 가드 문서 페이지 링크 제공
- 가드는 컴포넌트 렌더링 전 요청에 대한 검사를 수행하는 함수
- 'Manage' 페이지는 로그인한 사용자만 접근 가능
- 로그인하지 않은 사용자는 'Manage' 페이지 링크 보이지 않으나, URL 직접 입력 시 접근 가능
- 사용자 인증 상태를 확인하여 페이지 접근 허용 여부 결정
- Vue 라우터는 이 문제 해결을 위해 세 가지 옵션 제공
- 첫 번째 옵션: 전역 가드
- 모든 라우트에 대해 실행되는 가드
- 'beforeEach' 함수를 사용하여 모든 요청 전에 함수 추가
- 모든 라우트에 적용되어 사용자 또는 다른 요소에 대한 검사 수행 가능
- 콜백 함수에 'to', 'from', 'next' 매개변수 사용
- 'next' 함수 호출 전까지 컴포넌트 렌더링 안 됨
- 콘솔에서 'to'와 'from' 매개변수 로깅
- 전역 가드는 모든 요청에 대해 지속적으로 호출
- 전역 가드는 인증 필요한 페이지 접근 막기에 과도함
- 다음 강의에서 특정 라우트에 가드 적용 방법 살펴볼 예정