Vue 라우팅 차단의 여러 가지 방법

프론트 엔드 기술의 지속적인 개발로 인해 vue 프레임워크는 개발자들 사이에서 점점 더 선호되고 있습니다. Vue 프로젝트를 개발할 때 라우팅은 매우 중요한 구성 요소입니다. 라우팅을 통해 단일 페이지 애플리케이션(SPA)의 페이지 전환 및 구성 요소 재사용이 가능해 프로젝트 성능과 사용자 경험을 향상시킬 수 있습니다. 프로젝트의 보안과 신뢰성을 보장하기 위해서는 불법적인 요청을 차단하거나 리디렉션하기 위해 라우팅에 인터셉터를 추가해야 합니다. 이 기사에서는 Vue 라우팅 차단의 원리와 구현 방법을 빠르게 이해할 수 있도록 여러 가지 Vue 라우팅 차단 방법을 소개합니다.

1. 글로벌 프론트 가드

Vue 라우터는 라우팅 전환 전에 요청을 가로챌 수 있는 글로벌 프론트 가드를 제공합니다. 글로벌 프리가드를 사용하면 사용자가 로그인했는지 여부를 확인하거나, 해당 사용자에게 해당 페이지에 접근할 수 있는 권한이 있는지 확인할 수 있습니다. router/index.js에 다음 코드를 추가하세요:

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next('/login');
  }
})

이 코드 조각은 각 경로 전환 전에 실행되어 사용자가 로그인했는지 확인합니다. 그렇지 않은 경우 로그인 페이지로 이동합니다. 이는 사용자 보안과 시스템 안정성을 효과적으로 보장할 수 있는 매우 일반적인 전역 경로 차단 방법입니다.

2. 경로 전용 가드

Vue Router에서는 경로별로 별도의 가드를 설정할 수 있습니다. 경로 독점 가드는 경로 매개변수 확인, 비동기 인터페이스 호출, 데이터 처리 등에 사용될 수 있습니다. router/index.js에 다음 코드를 추가하세요.

const router = new VueRouter({
  routes: [
    {
      path: '/example/:id',
      component: Example,
      beforeEnter: (to, from, next) => {
        const id = to.params.id;
        if (id > 0 && id < 100) {
          next();
        } else {
          next('/error');
        }
      }
    }
  ]
})

이 코드 조각은 /example/:id 경로가 전환되기 전에 실행되어 전달된 매개변수 ID가 조건을 충족하는지 확인합니다. 그렇지 않은 경우 "/error"로 이동합니다. 그렇지 않으면 라우팅 전환을 계속합니다. 경로 독점 가드는 경로 전환을 보다 유연하게 제어할 수 있는 매우 유연한 경로 차단 방법입니다.

3. 글로벌 포스트 후크

글로벌 프론트 가드와 마찬가지로 Vue Router는 라우팅 전환 후 응답을 가로챌 수 있는 글로벌 포스트 후크도 제공합니다. 전역 포스트 후크는 페이지 통계, 오류 처리 등과 같은 라우팅 전환 후 일부 논리적 문제를 처리하는 데 사용될 수 있습니다. router/index.js에 다음 코드를 추가하세요.

router.afterEach(( to, from ) => {
  const currentPath = to.path;
  const params = to.params;
  console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})

이 코드 조각은 각 경로 전환 후에 실행되어 현재 라우팅 페이지의 경로와 매개변수를 출력합니다. 글로벌 포스트 후크를 통해 우리는 프로젝트 개발 및 테스트의 다음 단계에 대한 라우팅 상태와 해당 결과를 더 잘 이해할 수 있습니다.

요약:

Vue Router에서 경로 차단은 시스템의 신뢰성, 보안 및 안정성을 향상시키는 데 사용할 수 있는 매우 중요한 구성 요소입니다. 글로벌 프론트 가드, 경로 전용 가드, 글로벌 포스트 후크를 통해 경로의 상태와 동작을 더 잘 제어할 수 있습니다. 실제 개발 과정에서는 프로젝트의 전반적인 품질과 사용자 경험을 보장하기 위해 프로젝트의 실제 상황을 기반으로 적절한 경로 차단 방법을 선택해야 합니다.

위 내용은 Vue 라우팅 차단의 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!