Vue 문서의 경로 보호 기능 소개

Vue는 많은 강력한 기능을 제공하는 인기 있는 프런트 엔드 프레임워크이며 그 중 하나는 경로 보호 기능입니다. 경로 보호 기능은 Vue 라우팅의 중요한 기능이며 경로를 탐색하거나 경로를 떠날 때 제어 논리를 실행하는 데 사용됩니다. 루트 가드 기능을 사용하면 경로 읽기 및 수정은 물론 다양한 조건에 따른 경로 탐색을 제어할 수 있습니다. 이 기사에서는 Vue에서 경로 가드 기능의 역할과 사용법을 이해하는 데 도움이 되도록 Vue 문서의 경로 가드 기능을 소개합니다.

루트 가드 기능은 글로벌 프론트 가드, 글로벌 포스트 후크, 경로 전용 가드의 세 가지 범주로 나눌 수 있습니다. 아래에서는 세 가지 유형의 가드를 각각 소개합니다.

글로벌 사전 가드:

글로벌 사전 가드는 루트 점프 전에 실행될 수 있습니다. 전체 프로젝트의 모든 경로에 적용되도록 Vue 라우터 개체에 전역 추가 가드를 등록할 수 있습니다. 아래와 같이 beforeEach 메소드를 사용하여 Vue Router 객체에 전역 beforeEach 가드를 등록합니다.

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 下一步执行钩子函数，如果全部执行完了，则返回空或一个true值
})

가장 간단한 사용법은 next() 메소드를 호출하여 아웃바운드 작업을 시작하는 것입니다. 탐색을 취소하려는 경우(예: 사용자에게 액세스 권한이 없음) false 또는 문자열 또는 Error 인스턴스를 반환하면 탐색이 종료되고 해당 경로로 직접 전환됩니다. 예를 들어 다음 가드는 사용자가 로그인하지 않은 경우 탐색을 종료합니다.

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuth
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

전역 포스트훅:

전역 포스트훅은 탐색이 확인된 후 실행됩니다. 이 가드는 다음 기능을 허용하지 않으며 탐색 자체를 변경하지 않습니다.

router.afterEach((to, from) => {
  // to: 要进入的目标路由
  // from: 正在离开的路由
})

경로 전용 가드:

경로 전용 가드는 경로 구성에서 설정할 수 있습니다. 즉, 처리할 다양한 접두사와 접미사를 정의할 수 있습니다. 다른 경로. beforeEnter 가드를 사용하여 특정 경로에 대한 단독 가드 기능을 구성할 수 있습니다(글로벌 가드와 달리 라우터 개체에 가드를 등록할 필요가 없음). beforeEnter 가드는 경로 독점 구성에 존재하는 경우에만 실행됩니다.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

경로 독점 가드에서 수행되는 논리는 전역 프론트 가드 기능의 논리와 매우 유사하지만, 프론트 가드를 사용하면 모든 경로에 대해 동일한 논리를 수행할 수 있는 반면 경로 독점 가드는 특정 논리를 정의할 수 있습니다.

요약:

경로 보호 기능은 Vue 라우팅의 중요한 부분으로, 경로 탐색을 제어할 수 있는 기능을 제공합니다. 글로벌 프론트 가드, 글로벌 포스트 후크, 경로 독점 가드는 세 가지 가드 유형으로, 각각 용도와 특성이 다릅니다. Vue 라우팅을 사용할 때 이러한 다양한 유형의 가드를 더 깊이 이해하고 사용하면 경로 탐색을 더 잘 제어하고 보다 유연한 프런트 엔드 애플리케이션을 개발하는 데 도움이 될 수 있습니다.

위 내용은 Vue 문서의 경로 보호 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!