이전항법 가드 케이스 튜토리얼의 각 구현

이번에는 navigationguard beforeEach 구현 방법에 대한 튜토리얼을 가져오겠습니다. Navigation Guard beforeEach 구현 시 주의사항은 무엇인가요?

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

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

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

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

라우터를 사용할 수 있습니다. .beforeEach 글로벌 프론트 가드 등록:

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

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

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

to: 경로: 진입하려는 대상 경로object

from: 경로: 현재 탐색이 떠나려는 경로

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에서 원본 및 참조 값을 저장하는 방법

JS는 정규 표현식을 사용하여 생년월일을 결정합니다

위 내용은 이전항법 가드 케이스 튜토리얼의 각 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!