기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue에서 경로 인터셉터는 주로 특정 경로로 이동하기 전이나 특정 경로를 떠날 때 가로채서 처리하는 데 사용됩니다. 이 메커니즘을 통해 개발자는 경로 탐색이 발생하기 전이나 후에 권한 확인, 데이터 로드, 페이지 이동 등과 같은 특정 논리를 수행할 수 있습니다.

Vue Router에서는 다음과 같은 방법으로 경로 인터셉터를 구현할 수 있습니다.

1. 글로벌 비포 가드:

   • router.beforeEach(to, from, next): 전역 사전 가드를 등록합니다. 경로 탐색이 실행되면 경로가 변경되기 전에 가드가 호출됩니다.
   • 목적: 전역 권한 확인, 페이지 로딩 진행률 표시줄 제어 등에 적합합니다.

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2. 글로벌 리졸브 가드:

• router.beforeResolve(to, from, next): 글로벌 프론트 가드 이후 탐색이 확인되기 전에 호출되는 글로벌 파싱 가드를 등록합니다.

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. 경로별 가드:

• 라우팅 구성 객체에 직접 추가beforeEnter단일 경로에 보호 논리를 추가하는 필드입니다.

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4. 구성요소 내 가드:

• 내부 구성 요소에 사용됨beforeRouteEnter, beforeRouteUpdate, 그리고beforeRouteLeave후크 함수, 이러한 함수는 경로가 현재 구성 요소로 이동할 때, 현재 구성 요소를 재사용할 때, 현재 구성 요소가 떠날 때 호출됩니다.

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

이러한 경로 인터셉터의 메커니즘은 개발자가 다양한 수준 및 시나리오에서 애플리케이션의 탐색 프로세스를 제어하고 권한 제어, 데이터 사전 로드 및 페이지 점프와 같은 기능을 구현하는 데 도움이 되므로 프런트엔드 애플리케이션의 대화형 경험을 더 잘 관리하고 최적화할 수 있습니다.