140. Route Meta Fields
npm create vue@latest
이 강의에서는 이전 강의에서 구현한 리디렉션 동작을 개선하기 위해 메타 필드를 활용할 것입니다.
현재 저는 로그아웃 메소드를 보고 있습니다.
헤더 컴포넌트에서 이 메소드를 작성했습니다.
우리는 사용자가 로그인하지 않은 상태에서 제한된 페이지를 방문하려고 할 때 리디렉션하도록 앱을 프로그래밍했습니다.
조건문에서 현재 라우트가 무엇인지 확인한 후 리디렉션합니다.
이 솔루션은 작은 규모의 앱에서는 작동하지만, 큰 규모의 앱에서는 스케일링되지 않습니다.
큰 규모의 앱에서는 인증이 필요한 수십 개의 라우트가 있을 수 있습니다.
그런 경우에는 조건문에 라우트를 업데이트해야 합니다.
여기서는 조건문을 수정하여 다섯 가지 다른 라우트를 확인합니다.
이 라우트들은 실제로 존재하지 않습니다.
동일한 변경을 할 필요는 없습니다.
이것은 단지 예시입니다.
보시다시피, 이제 좀 지저분해 보이기 시작합니다.
우리가 20개 또는 심지어 200개의 라우트를 가지고 있다고 상상해 보세요.
이 솔루션은 작동하지만 우아하지 않습니다.
이를 빠르게 취소하겠습니다.
라우트 메타 필드를 사용하여 이를 개선할 수 있습니다.
이 강의의 리소스 섹션에서는 라우트 메타 필드 문서 페이지로의 링크를 제공합니다.
메타 필드는 라우트에 할당할 수 있는 사용자 정의 값들입니다.
문자열, 객체, 숫자 등 어떤 유형의 데이터라도 가질 수 있습니다.
라우트에 메타 필드를 추가함으로써 이름 대신 메타 필드를 확인할 수 있습니다.
메타 필드 사용은 매우 간단합니다.
시작해 봅시다.
첫 번째 단계는 레코드에 메타 필드를 추가하는 것입니다.
에디터에서 라우터 파일을 엽니다.
'manage' 라우트 레코드에 메타 필드를 추가할 것입니다.
레코드에 'Meta'라는 속성을 추가합니다.
이 값은 객체여야 합니다.
이 객체는 키-값 쌍의 집합을 포함할 수 있습니다.
이 객체에는 어떤 유형의 데이터라도 저장할 수 있습니다.
우리는 'requires auth'라는 속성을 만들 것입니다.
이것을 true로 설정할 것입니다.
이것을 사용하여 라우트가 인증을 필요로 하는지 여부를 결정할 것입니다.
나머지 라우트에는 추가하지 않을 것입니다.
왜냐하면 필요하지 않기 때문입니다.
메타 필드가 없으면 라우트가 인증을 필요로 하지 않는다고 가정할 것입니다.
다음 단계는 메타 필드를 확인하는 것입니다.
헤더 컴포넌트 파일로 전환합니다.
로그아웃 메소드를 찾습니다.
이 메소드는 사용자를 리디렉션한 조건문이 있는 곳입니다.
이름을 확인하는 대신 메타의 'requires auth' 속성을 확인하겠습니다.
그것이 true인지 확인하고 싶습니다.
메타 객체는 모든 레코드에 사용할 수 있습니다.
우리가 레코드에 추가한 메타 필드를 포함할 것입니다.
'requires auth' 속성이 존재하고 true라면 사용자를 리디렉션할 것입니다.
우리는 매 요청에서 메타 필드를 확인함으로써 이를 더욱 발전시킬 수 있습니다.
에디터에서 'manage' 컴포넌트를 엽니다.
사용자가 인증되었는지 확인하기 위해 'before route enter' 가드를 사용했습니다.
이것은 작동하지만 이 컴포넌트에만 적용됩니다.
인증이 필요한 다른 컴포넌트가 있다면 이 솔루션을 복사하여 붙여넣어야 합니다.
현재로서는 이상적이지 않습니다.
메타 필드의 도입으로 우리는 컴포넌트 자체가 아닌 전역적 수준에서 메타 필드를 확인할 수 있습니다.
이 코드를 메타 필드를 사용하여 조정해 봅시다.
먼저 컴포넌트에서 가드를 제거해야 합니다.
전역 수준으로 이동하고 있기 때문에 그것을 유지하는 것은 의미가 없습니다.
저는 참조 및 예시 목적으로 가드와 스토어의 가져오기 문을 주석 처리할 것입니다.
보통 이것을 유지하지 않겠지만, 원한다면 안전하게 제거할 수 있습니다.
좋습니다.
다음으로, 전역 가드를 업데이트해야 합니다.
라우터 파일에서 전역 가드를 정의했습니다.
현재 우리는 메시지를 로깅하고 있습니다.
'to Meta'라는 속성을 로그하는 문을 업데이트합시다.
'to' 객체는 사용자가 탐색하고 있는 라우트를 나타냅니다.
메타 속성에 접근하고 있습니다.
메타 속성은 레코드에 첨부된 메타데이터의 객체입니다.
루트 레코드에 메타데이터가 존재하지 않으면 값은 빈 객체가 될 것입니다.
더 잘 이해하기 위해 브라우저에서 페이지를 새로 고침해 봅시다.
콘솔에서 우리 루트의 메타데이터를 찾을 수 있습니다.
우리는 사용자가 탐색하고 있는 경로와 일치하는 레코드 중 어느 것이든 'requires auth' 메타 필드를 가지고 있는지 확인하고 싶습니다.
그 중 어느 하나라도 가지고 있다면 사용자가 인증되었는지 확인하고자 합니다.
에디터로 돌아가 전역 가드 함수에서 로그 문을 주석 처리합시다.
첫 번째 단계는 메타 필드를 확인하는 것입니다.
루트가 누구나 접근할 수 있는 경우에는 사용자가 인증되었는지 확인할 필요가 없습니다.
전역 가드에서 논리를 작성하고 있으므로 아무것도 가정하지 않는 것이 중요합니다.
조건 블록을 만들 것입니다.
사용자가 탐색하고 있는 경로와 일치하는 레코드 내에서 'requires auth' 필드가 존재하는지 확인하려고 합니다.
조건 내에서 'to.meta.requiresAuth' 속성을 not 연산자와 함께 확인할 것입니다.
만약 이 레코드에 이 메타 필드가 없으면 인증이 필요하지 않습니다.
사용자가 계속 진행할 수 있도록 next 함수를 호출할 것입니다.
함수가 끝나기 전에 함수를 반환하려고 합니다.
만약 조건이 통과하지 않는다면 라우트는 인증이 필요합니다.
이는 사용자의 인증 상태를 스토어에서 확인해야 함을 의미합니다.
우선, 라우터 파일 상단에서 사용자 스토어를 가져와야 합니다.
사용자 스토어를 가져오세요.
전역 가드의 조건문 블록 이후로 돌아가 'store'라는 변수를 생성합니다.
이 변수의 값은 스토어 함수가 될 것입니다. 이제 가드 내에서 스토어가 접근 가능합니다.
두 번째 조건문을 추가합니다.
이 조건은 스토어의 'userLoggedIn' 속성이 true인지 확인합니다.
만약 로그인되어 있다면, 사용자가 진행할 수 있도록 next 함수를 호출하는 조건문 블록 안에 있습니다.
로그인되어 있지 않다면, 홈페이지로 리디렉션해야 합니다.
else 블록을 생성합니다.
이 블록 내에서 next 함수를 호출하고, 이름 속성이 'home'으로 설정된 객체를 전달합니다.
우리는 'manage' 컴포넌트에서 사용자를 리디렉션하는 데 사용된 같은 논리를 사용하고 있습니다.
주된 차이점은 이것이 'requires auth' 메타 필드를 가진 어떤 레코드에서도 실행될 것이라는 점입니다.
이 솔루션이 작동하는지 확인해 봅시다.
홈페이지를 새로 고칩니다.
페이지는 정상적으로 로드됩니다.
다음으로, 로그인을 시도하고 'manage' 페이지로 이동해 봅시다.
'manage' 페이지는 잘 작동합니다.
라우트 이력을 확인하여 이상한 일이 발생하지 않았는지 확인하는 것이 좋습니다.
어떤 레코드라도 'requires auth' 속성을 가지고 있다면, 사용자가 인증되었는지 확인할 것입니다.
그렇지 않다면 홈페이지로 리디렉션합니다.
그렇지 않으면 목적지로 계속 진행할 수 있습니다.
이런 행동은 루트 메타 필드 덕분에 가능합니다.
사용자 정의 값을 할당함으로써 우리는 애플리케이션에 더 유연한 코드를 작성할 수 있습니다.