네비게이션 가드를 만들려면 vue-route+beforeEach를 사용하세요

이번에는 vue-route+beforeEach를 사용하여 내비게이션 가드를 만들 때 주의 사항에 대해 소개하겠습니다. 다음은 실제 사례입니다.

라우팅 점프 전에 로그인 확인(로그인하지 않은 경우 로그인 페이지로 이동)과 같은 일부 확인을 수행하는 것은 웹사이트에서 일반적인 요구 사항입니다. 이런 점에서 vue-route에서 제공하는 beforeRouteUpdate를 이용하면 네비게이션 가드(navigation-guards)를 쉽게 구현할 수 있습니다.

navigation-guards라는 이름이 이상하게 들리는데, 공식 문서에서는 이렇게 번역하고 있으니 그렇게 부르겠습니다.

문서 주소 붙여넣기: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

먼저 문서에서 beforeRouteUpdate 사용법을 발췌해 보겠습니다:

router.beforeEach를 사용할 수 있습니다. 글로벌 프론트가드를 1개 등록하려면:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

내비게이션이 실행되면 생성된 순서대로 글로벌 프론트가드가 호출됩니다. Guard는 비동기적으로 구문 분석되고 실행되며 모든 Guard가 해결될 때까지 탐색이 대기됩니다.

각 가드 메소드는 세 가지 매개변수를 받습니다:

to: Route: 진입하려는 대상 경로 객체

from: Route: 현재 네비게이션이 떠나려고 하는 경로

next: 기능: 이 메소드 호출해야 합니다. 이 후크를 해결해 보겠습니다. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.

next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.

next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼을 사용하여) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.

next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.

next(error): (2.4.0+) next에 전달된 매개변수가 Error 인스턴스인 경우 탐색이 종료되고 오류는 router.onError()에 의해 등록된 콜백으로 전달됩니다.

다음 메서드를 호출해야 합니다. 그렇지 않으면 후크가 해결되지 않습니다.

아래 예시를 작성해 보겠습니다. 이전 블로그의 강좌 및 주문을 포함하여 로그인 여부를 판단해야 합니다. 로그인한 경우 로그인 페이지로 이동하여 홈페이지로 이동합니다. :

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 쿠키 플러그인 작동 방법

Node.js를 사용하여 이메일 활성화 등록 방법

위 내용은 네비게이션 가드를 만들려면 vue-route+beforeEach를 사용하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!