Vue Guard를 사용하는 방법

Vue는 개발자가 반응형 웹 애플리케이션을 만드는 데 도움이 되는 다양한 기능과 옵션을 제공하는 인기 있는 JavaScript 프레임워크입니다. Guard는 Vue에서 매우 중요한 개념입니다. 이 기사에서는 Vue Guard의 기본 사용법과 사례에 대해 설명합니다.

Vue Guard 개요

Vue에서 가드는 경로 및 구성 요소의 수명 주기 이벤트를 수신할 수 있는 기능입니다. 이러한 이벤트가 트리거되면 경비원은 사용자 권한 확인, 수신 데이터 복사 및 검사 등의 작업을 수행할 수 있습니다. Vue Guard는 글로벌 가드와 라우팅 가드의 두 가지 범주로 나뉩니다. 이들 사이의 주요 차이점은 모니터링하는 개체에 있습니다.

Global Guards

Global Guard는 Vue 애플리케이션의 수명 주기와 연관되어 있습니다. 각 Vue 인스턴스가 생성, 삭제, 업데이트 또는 마운트될 때 일부 작업을 수행할 수 있습니다. 글로벌 가드에는 다음 네 가지 후크 기능이 포함됩니다.

1. beforeCreate: Vue 인스턴스가 초기화된 후 호출되지만 데이터 관찰 및 이벤트/감시자 이벤트 구성 전에 호출됩니다. 이 후크 기능은 구성 요소 수준 데이터/상태를 초기화하기에 좋은 시간입니다.
2. created: Vue 인스턴스가 생성된 후 호출됩니다. 이때 구성 요소 인스턴스는 DOM에 마운트되지 않습니다. 이 후크 기능에서 일부 비동기 작업을 수행할 수 있지만 구성 요소의 상태 데이터를 수정하는 것은 권장되지 않습니다.
3. beforeMount: Vue 인스턴스가 DOM 요소에 마운트되기 전에 호출됩니다. 이때 구성 요소의 템플릿은 HTML 문자열로 컴파일되었지만 아직 DOM에 삽입되지 않았습니다.
4. mounted: Vue 인스턴스가 DOM 요소에 마운트된 후 호출됩니다. DOM 요소에 액세스하고 이 후크 기능 내에서 타사 플러그인 초기화 등의 기타 작업을 수행할 수 있습니다.

Route Guards

Route Guard는 애플리케이션이 특정 경로로 이동할 때 트리거되는 후크 기능입니다. 경로의 액세스 기록을 모니터링하고, 사용자에게 특정 경로에 대한 액세스 권한이 있는지 확인하고, 비동기 데이터 로드 및 기타 작업을 처리할 수 있습니다. Vue의 경로 가드에는 다음과 같은 6가지 후크 기능이 포함되어 있습니다.

1. beforeRouteEnter: 경로가 구성 요소에 진입하기 전에 호출됩니다. 이 후크 기능을 통해 컴포넌트 인스턴스에 접근할 수 있지만, 컴포넌트 내의 상태 데이터와 인스턴스 메소드에는 접근할 수 없습니다.
2. beforeRouteUpdate: 경로가 업데이트될 때 호출됩니다. 일반적으로 비동기 데이터 로딩과 같은 작업을 처리하는 데 사용됩니다.
3. beforeRouteLeave: 경로가 구성 요소를 떠날 때 호출됩니다. 가드를 사용하여 사용자 입력의 유효성을 검사하거나 저장되지 않은 변경 사항에 대해 사용자에게 경고할 수 있습니다.
4. beforeEach: 새 경로로 이동하기 전에 호출됩니다. 이 후크 기능에서는 사용자 권한을 확인하고 비동기 데이터 로딩 및 기타 작업을 처리할 수 있습니다.
5. afterEach: 탐색이 완료된 후 호출됩니다. 탐색 중에 발생하는 오류를 이 후크 기능으로 처리할 수 있습니다.
6. onError: 경로 탐색에 오류가 있을 때 호출됩니다. 요청 실패, 네트워크 오류 등의 예외사항을 Hook 기능으로 처리할 수 있습니다.

Vue 가드 사용

Vue 가드는 실제 개발에서 매우 중요하며 다양한 시나리오에서 비즈니스 로직을 처리하는 데 사용할 수 있습니다. 아래에서는 Vue 가드의 기본 사용법을 보여주기 위해 예제를 사용합니다.

사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션되어야 하는 페이지가 있다고 가정해 보겠습니다. 이 기능을 구현하기 위해 beforeEach 가드를 사용할 수 있습니다. 먼저 경로 배열을 정의합니다.

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

라우팅 구성에서 액세스를 위해 로그인이 필요한 /profile 경로를 지정하고 라우팅 메타 정보를 통해 인증이 필요하도록 표시합니다. 다음으로, router.js 파일에 beforeEach 후크 함수를 추가합니다:

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/login');   //如果需要登录并且用户未登录，则重定向到登录页面
  } else {
    next();   //否则允许导航到目标路由
  }
});

beforeEach 후크 함수에서는 먼저 현재 사용자 개체 currentUser를 가져온 다음, requireAuth 속성을 사용하여 대상 경로에 액세스하기 위해 로그인이 필요한지 여부를 결정합니다. 로그인이 필요하고 현재 사용자가 로그인되어 있지 않은 경우 로그인 페이지로 리디렉션됩니다. 그렇지 않으면 대상 경로로의 탐색을 허용합니다(탐색을 허용하려면 next() 메서드 사용).

결론

Vue 가드는 Vue 프레임워크에서 매우 중요한 개념으로 경로 및 구성 요소의 수명 주기 이벤트를 수신하고 이러한 이벤트가 트리거될 때 사용자 권한 확인, 복사와 같은 일부 작업을 수행하는 데 사용할 수 있습니다. 들어오는 데이터 등을 확인합니다. 이 글은 글로벌 가드와 라우팅 가드에 대한 기본 지식을 소개하고, Vue 가드의 기본 사용법을 보여주는 예제를 제공합니다. 이는 개발자가 Vue 가드를 더 잘 이해하고 사용하며, 실제 개발에서 자신의 역할을 충분히 활용할 수 있도록 하기 위한 것입니다.

위 내용은 Vue Guard를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!