[javascript] Vue Router의 네비게이션 가드 사용 사례

18 Dec 2023

javascript

Vue Router를 사용하면 라우팅 및 네비게이션 가드를 통해 애플리케이션의 네비게이션을 관리할 수 있습니다. 네비게이션 가드는 Vue Router에서 제공하는 기능 중 하나로, 라우터의 네비게이션을 제어하여 특정 조건을 충족할 때만 페이지로 이동하도록 설정할 수 있습니다.

전역 네비게이션 가드

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  // 네비게이션 가드 로직을 추가합니다.
  if (to.meta.requiresAuth) {
    // 사용자가 로그인했는지 확인하는 로직을 추가합니다.
    if (user.loggedIn) {
      next(); // 다음 페이지로 이동합니다.
    } else {
      next('/login'); // 로그인 페이지로 리다이렉트합니다.
    }
  } else {
    next(); // 다음 페이지로 이동합니다.
  }
});

위의 코드는 전역 네비게이션 가드를 설정하는 예시입니다. beforeEach 메서드를 사용하여 모든 라우트 전환에 적용될 네비게이션 가드를 정의할 수 있습니다. 예제에서는 to 객체의 meta.requiresAuth 속성을 사용하여 인증이 필요한 페이지에 대한 접근을 제어하고 있습니다.

라우트별 네비게이션 가드

const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        // 라우트별 네비게이션 가드 로직을 추가합니다.
        if (user.loggedIn) {
          next(); // 다음 페이지로 이동합니다.
        } else {
          next('/login'); // 로그인 페이지로 리다이렉트합니다.
        }
      },
    },
  ],
});

위의 코드는 라우트별로 네비게이션 가드를 설정하는 예시입니다. 각 라우트 객체의 beforeEnter 속성을 사용하여 해당 라우트에만 적용되는 네비게이션 가드를 정의할 수 있습니다.

네비게이션 가드를 통해 사용자의 권한 상태에 따라 페이지 이동을 제어할 수 있으며, 이는 애플리케이션의 보안 및 사용자 경험을 개선하는 데 도움이 됩니다.

더 많은 정보를 원하시면 Vue Router 공식문서를 참고하시기 바랍니다.