Vue 문서에서 라우팅 인증 기능을 사용하는 방법-View.js-php.cn

Vue 문서에서 라우팅 인증 기능을 사용하는 방법

王林

풀어 주다： 2023-06-20 09:07:02

원래의

1469명이 탐색했습니다.

Vue는 매우 편리하고 사용하기 쉬운 라우팅 메커니즘을 제공하는 매우 인기 있는 JavaScript 프레임워크입니다. Vue에서는 경로를 정의하여 페이지 점프를 관리할 수 있지만 실제 개발 프로세스에서는 사용자가 권한이 있는 페이지에만 액세스할 수 있도록 특정 경로를 인증해야 하는 경우가 많습니다. 이 글에서는 Vue 문서에서 제공하는 라우팅 인증 기능을 사용하는 방법을 소개합니다.

루팅인증 기능이란?

경로 인증 기능은 Vue에서 제공하는 글로벌 경로 보호 기능 중 하나입니다. 사용자에게 특정 경로에 대한 액세스 권한이 있는지 확인하는 데 사용할 수 있습니다. 라우팅 인증 기능은 라우팅 구성에서 정의해야 하며 특정 경로에 진입하기 전에 실행됩니다. 경로 인증 기능이 true를 반환하면 해당 사용자는 해당 경로에 대한 접근 권한이 있어 정상적으로 진입할 수 있다는 의미이고, false를 반환하면 해당 사용자는 해당 경로에 접근할 수 있는 권한이 없어 다음 경로로 리디렉션된다는 의미입니다. 다른 페이지나 오류 메시지가 표시됩니다.

라우팅 인증 기능을 어떻게 정의하나요?

Vue에서는 beforeEnter 함수를 사용하여 경로 인증 기능을 정의할 수 있습니다. beforeEnter 함수는 라우팅 구성에서 별도로 정의된 함수로, to, from, next 3개의 매개변수를 받습니다.

to 매개변수는 입력할 대상 라우팅 객체를 나타내고, from은 현재 라우팅 객체를 나타내며, next는 경로의 점프 동작을 제어하는 데 사용되는 함수입니다. beforeEnter 함수에서는 사용자의 권한을 판단하고 판단 결과에 따라 다음 함수를 호출하여 경로가 계속 점프해야 하는지 제어할 수 있습니다.

다음은 beforeEnter 함수의 샘플 코드입니다.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (user.checkAdmin()) {
          next()
        } else {
          next('/login')
        }
      }
    }
  ]
})

로그인 후 복사

위 코드에서는 beforeEnter라는 함수를 정의하고 이를 대시보드 라우트의 beforeEnter 함수로 사용합니다. 사용자가 /dashboard 경로를 입력하면 Vue는 beforeEnter 함수를 호출하고 to, from 및 next의 세 가지 매개변수를 전달합니다.

beforeEnter 함수에서는 먼저 checkAdmin이라는 함수를 호출하여 사용자가 관리자인지 확인합니다. 사용자가 관리자인 경우 경로가 정상적으로 /dashboard 경로로 점프할 수 있도록 next 함수를 호출하고, 그렇지 않으면 next('/login')를 호출하여 사용자를 로그인 페이지로 리디렉션합니다.

다음 함수가 호출되지 않으면 경로가 차단되고 기본적으로 점프하지 않는다는 점에 유의하세요.

라우팅 인증 기능의 적용 시나리오

루팅 인증 기능은 사용자 권한을 확인해야 하는 모든 시나리오에 적합합니다. 예: