[Udemy Vue 완벽가이드 Section13] 185. 내비게이션 가드 자세히 알아보기

전역 가드만 있는게 아니다.

beforeEach(function)는 모든 내비게이션 액션(action)에서 어느 라우트로부터 어느 라우트로 이동하는지는 전혀 상관없이 실행된다.

이걸로 충분할 때도 있지만 그렇지 않을 때도 있다.

 

개별 라우트를 보호해야할 때가 있다.

 

 

if검사를 사용해서 to, from 객체를 확인하고 라우트에 따라 다른 로직을 사용해서 개별 라우트를 보호할 수도 있지만 

beforeEach 내비게이션 가드를 각 라우트에 설정하는 방법도 있다.

 

# beforeEnter

/users 라우트에 설정해보자.

/users 라우트 구성에 beforeEnter를 추가하면 된다.

라우트가 하나이므로 beforeEach를 쓰지 않고 beforeEnter를 쓴다.

beforeEach와 마찬가지로 인수로 to, from next가 필요하다.

'users beforeEnter'를 콘솔에 출력하고 to, from도 출력해서 내용을 확인해보자.

그 다음엔 next를 호출해서 승인이나 거부를 해도 된다.

next()는 /users 라우트로의 이동을 승인하는 기능을 한다.

{
  path: '/users',
  components: { default: UsersList, footer: UsersFooter },
  beforeEnter(to, from, next) {
     console.log('users beforeEnter');
     console.log('users beforeEnter', to, from);
    next();
  },
},

 

이제 사용자가 /users로 갈 때마다 beforeEnter 코드가 호출된다.

Users 페이지로 가면 콘솔에서 'Global beforeEach'의 실행을 볼 수 있다.

- 이 가드는 내비게이션 액션이 있을 때마다 실행되므로 당연히 콘솔에 출력된다.

 

콘솔 중간에는 'users beforeEnter' 항목과 to와 from이 출력된 것이 보인다.

to는 당연히 Users 페이지를 가리킨다. beforeEnter훅이 Users페이지에 등록되어 있으므로.

 

 

# beforeRouteEnter

만일 훅을 route수준이나 route 구성에 등록하고 싶지 않다면, '컴포넌트'에 새로운 훅이나 메서드를 추가하는 것도 가능하다.

UsersList 컴포넌트에 추가해보자.

UsersList.vue 파일의 컴포넌트 구성 객체에 created나 mounted같은 Vue생명 주기 메서드나 beforeRouteEnter 메서드를 추가할 수 있다.

지금 우리 프로젝트에서처럼 Vue 라우터를 사용하면 메서드가 먼저 호출된 후 이 컴포넌트로의 이동이 승인된다.

beforeRouteEnter메서드에도 to, from, next가 들어가니 이전과 똑같은 작업을 하면 된다.

//UsersList.vue
export default {
 components: {
  UserItem,
 },
 //..
 beforeRouteEnter(to, from, next) {
  console.log('UsersList Cmp beforeRouteEnter');
  console.log(to, from);
  next();
 },
}

next를 호출하거나 다른 로직을 사용해서 사용자가 페이지를 이동하는걸 승인하거나 거부하고 리디렉션한다.

 

Users 페이지로 가면 아래와 같은 순서대로 내비게이션 가드가 실행된다.

항상 전역 가드가 먼저 실행 → 라우트 구성 수준 → 컴포넌트 수준이다.

이동이 승인되기 전에 훅이 모두 실행되기 때문에 next를 호출할 수있고 실제로 호출해서 직접 이동을 승인하거나 거부하거나 다른 곳으로 리디렉션할 수 있다.

 

컴포넌트 로드에 관련된 가드가 두 개 더 있다.

 

# beforeRouteUpdate

첫번째는 beforeRouteUpdate 가드로 컴포넌트 내부에서 직접 호출할 수 있다.

좀 더 정확히 말하면 재사용되는 컴포넌트 내부에서 호출하는건데 

이 경우에는 TeamMembers 컴포넌트에서 호출한다.

teamId 매개변수가 있고, 한 팀의 페이지에 있으면서 다른 팀원 페이지를 로드하는 것도 가능하다.

그리고 팀원 페이지는 계속 표시되니 재사용된다고 표현한다.

이 때 Vue 라우터는 컴포넌트 구성 객체에서 다른 메서드를 호출한다.

beforeRouteUpdate 메서드를 추가해보자.

// TeamMembers.vue
beforeRouteUpdate(to, from, next) {
  console.log('TeamMembers Cmp beforeRouteUpdate');
  console.log(to, from);
  next();
},

그러면 Vue는 라우트가 바뀌어서 새로운 데이터를 가지고 이 컴포넌트를 재사용해야할 때마다 beforeRouteUpdate메서드를 호출한다.

beforeRouteUpdate에도 to, from, next가 필요하다.

next를 사용해서 이동을 승인하거나 거부할 수 있다. beforeEach훅과 똑같다.

 

그 외에도 이동 대상인 라우트 객체에서 받아올 to와 from을 활용해서 새로 만든 params.teamId에 따라 loadTeamMembers를 호출할 수 있다.

// TeamMembers.vue
beforeRouteUpdate(to, from, next) {
  console.log('TeamMembers Cmp beforeRouteUpdate');
  console.log(to, from);
  this.loadTeamMembers(to.params.teamId);
  next();
},

물론 이 컴포넌트에는 teamId 라우트 매개변수의 변화를 처리하는 로직이 있기 때문에, beforeRouteUpdate를 그 용도로 사용하지는 않지만 teamId 프로퍼티를 감시하는데에 beforeRouteUpdate도 쓸 수 있다.

 

이제 다른 팀을 클릭하면 콘솔이 실행되고 내부 로직이 실행된 걸 확인할 수 있다.

 

이미 아래에서 watch로 teamId가 변하면 팀 멤버를 출력하기 때문에 beforeRouteUpdate함수의 this.loadTeamMembers함수는 주석처리하자.

 

또 다른 내비게이션 가드 혹은 내비게이션 훅을 호출할 수 있다는 것도 알아두면 좋다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.