[Vue.js] 라우터 네비게이션 가드

페이지에 접근 권한을 부여해야 하는 경우가 있다.
로그인을 한 상태에서만 접근이 가능한 경우, 혹은 로그인을 하지 않았을 때만 접근이 가능한 경우, 또는 특정 권한을 가진 경우에만 페이지 접근이 가능한 경우,,
이런 경우들은 단순히 버튼만 만들어 놓지 않았으니 괜찮다고 할 수 있는 것이 아니라 url을 이용해 접근을 하더라도 접근이 불가능하도록 사전에 권한 확인을 하는 코드가 필요하다.
우리는 라우터를 이용해 페이지를 띄워주기 때문에, 라우터가 페이지를 호출하기 전에 사전 확인하는 작업을 추가해주면 된다.

export const beforeEnter: requireAuth = () => (to, from, next) => {
  if (store.state.accessToken) {
    return next();
  }
  next("/login");
};

beforeEnter는 전역 가드가 아니기 때문에 네비게이션 가드가 필요한 라우터에 직접 달아주어야 한다.
다음은 공식 문서에 작성된 예시이다.

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
    },
  ],
});

라우터마다 네비게이션 가드를 일일이 달아주는 것이 조금 비효율적이고 무식한 방법일수도 있겠다는 걱정이 든다..
그러나 페이지마다 조건이 다르기 때문에.. 네비게이션 가드가 필요한 페이지를 따로 배열로 가지고 있는 것 보다는 효율적인 방법이 아닌가? 하는 생각이다.
beforeEnter등 가드를 호출한 이후에는 반드시 next()를 사용해 네비게이션을 승인하거나, next(path)를 사용해 새로운 네비게이션을 호출해야 한다.

공식 문서 : 라우터 네비게이션 가드