vue-route의 beforeEach를 사용하여 탐색 가드(라우팅 점프 전 로그인 확인) 기능을 구현합니다.

이러한 요구 사항은 웹사이트에서 일반적으로 발생합니다. 로그인 확인(로그인하지 않은 경우 로그인 페이지로 이동)과 같은 일부 확인은 점프를 라우팅하기 전에 수행되어야 합니다. 아래에서는 네비게이션 가드(루트 점프 전 로그인 확인) 기능을 구현하기 위해 vue-route의 beforeEach 사용 방법을 가져왔습니다. 관심 있는 친구들은 함께 살펴보세요

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

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

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

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

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(); 
});

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Ajax의 ReadyState 및 상태와 관련된 문제 논의

$.Ajax() 메서드 매개변수 종합 분석(그래픽 튜토리얼)

Ajax 기반 진행률 표시줄을 사용하여 파일 업로드 구현 기술

위 내용은 vue-route의 beforeEach를 사용하여 탐색 가드(라우팅 점프 전 로그인 확인) 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!