Vue 라우팅 가드에 대한 자세한 설명 및 적용 시나리오 분석

프론트 엔드 기술이 지속적으로 발전함에 따라 개발 프레임워크로서 Vue가 개발자들 사이에서 점점 더 인기를 얻고 있습니다. Vue의 라우팅 메커니즘은 Vue 프레임워크의 필수적인 부분이기도 합니다. 라우팅 시스템은 개발자가 복잡한 단일 페이지 애플리케이션을 구축하는 데 도움을 주는 동시에 페이지 상태 및 사용자 탐색을 관리하는 유연한 방법을 제공합니다. 이 경우 Vue 라우팅 가드는 꼭 숙지해야 할 지식 포인트가 됩니다.

그럼 Vue 루트 가드란 무엇인가요? Vue.js에서 Route Guard는 페이지 간 이동을 제어하는 ​​데 사용되는 메커니즘으로, 페이지 탐색 중 권한 확인, 상태 관리 등의 작업에 주로 사용됩니다. Vue 루트 가드는 주로 글로벌 루트 가드, 루트 독점 가드, 구성 요소 수준 가드의 세 가지 유형으로 나뉩니다.

글로벌 루트 가드:

글로벌 루트 가드는 모든 루트가 변경될 때 실행되어야 하는 코드 블록을 의미합니다. 전역 경로 가드에는 세 가지 주요 유형이 있습니다.

1. beforeEach(to, from, next)

는 경로가 진입하기 전에 호출됩니다. 여기에서 to 및 from 매개변수는 해당 매개변수를 나타냅니다. 진입하려는 객체와 떠나려는 객체를 각각 라우팅합니다.

샘플 코드는 다음과 같습니다.

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

은 경로 진입 후 호출되며 일반적으로 로깅 등의 작업에 사용됩니다.

샘플 코드는 다음과 같습니다.

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

는 경로가 구문 분석된 후에 호출되며 경로 지연 로딩을 사용할 때만 유용합니다.

샘플 코드는 다음과 같습니다.

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

경로 전용 가드:

경로 전용 가드는 특정 경로에 대한 가드로 현재 경로가 진입하거나 나갈 때만 호출됩니다. 사용법은 다음과 같습니다.

샘플 코드는 다음과 같습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

컴포넌트 레벨 가드:

컴포넌트 레벨 가드는 컴포넌트 내부의 탐색 가드를 말하며 컴포넌트의 내부 상태를 관리하는 데 사용할 수 있습니다. 구성 요소 수준 가드에는 네 가지 주요 유형이 있습니다.

1. beforeRouteEnter(to, from, next)

경로 진입 전에 호출되고 구성 요소의 내부 상태에 액세스할 때 사용됩니다.

샘플 코드는 다음과 같습니다.

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. beforeRouteLeave(to, from, next)

경로가 출발하기 전에 호출되며, 현재 경로를 떠날지 또는 수정 작업을 저장할지 확인하는 데 사용할 수 있습니다.

샘플 코드는 다음과 같습니다.

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. beforeRouteUpdate(to, from, next)

는 현재 경로가 업데이트되어 컴포넌트의 내부 상태를 업데이트할 때 호출됩니다.

샘플 코드는 다음과 같습니다.

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. beforeRouteLeave(to, from, next)

는 경로 렌더링 중에 호출되며 서버 측 렌더링 및 기타 작업에 사용할 수 있습니다.

샘플 코드는 다음과 같습니다.

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

위의 라우팅 가드 소개를 통해 라우팅 가드에는 로그인 여부 결정, 권한 확인 수행, 수정 작업 저장 등과 같은 많은 응용 시나리오가 있음을 알 수 있습니다. 다양한 시나리오에서는 다양한 라우팅 가드를 사용해야 하며 개발 중 처리에 적합한 가드를 선택해야 합니다.

간단히 말하면 Vue Route Guard는 매우 중요한 부분이므로 올바르게 사용하면 애플리케이션의 보안과 안정성을 크게 향상시킬 수 있습니다. 따라서 개발자는 경로 가드의 사용 및 적용 시나리오를 더 깊이 이해해야 합니다.

위 내용은 Vue 라우팅 가드에 대한 자세한 설명 및 적용 시나리오 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!