내비게이션 가드로 VUE 경로 보호

웹 응용 프로그램의 보안 인증이 중요합니다. 개인화 된 경험을 가능하게하고 사용자 별 컨텐츠 (예 : 로그인 상태)를로드하고 허용되지 않은 사용자가 개인 정보에 액세스하는 것을 방지하기 위해 권한을 평가하는 데 사용될 수 있습니다.

응용 프로그램은 일반적으로 특정 경로 아래에 컨텐츠를 배치하고 리디렉션 규칙을 작성하여 컨텐츠를 보호하고 사용자가 권한을 기준으로 리소스에 액세스하거나 자원을 멀리하도록 지시합니다. 보호 된 경로 뒤에 콘텐츠를 안정적으로 배치하려면 독립적 인 정적 페이지를 구축해야합니다. 이러한 방식으로 리디렉션 규칙은 리디렉션을 올바르게 처리 할 수 ​​있습니다.

VUE와 같은 최신 프론트 엔드 프레임 워크로 구축 된 단일 페이지 응용 프로그램 (SPA)의 경우 리디렉션 규칙을 사용하여 라우팅을 보호 할 수 없습니다. 모든 페이지는 브라우저의 관점에서 단일 항목 파일에서 나오기 때문에 index.html의 한 페이지 만 있습니다. 스파에서 라우팅 로직은 일반적으로 라우팅 파일에서 비롯됩니다. 이 기사는 주로 여기에서 인증을 구성합니다. 우리는 구체적으로 VUE의 내비게이션 가드에 의존하여 인증 특정 경로를 처리 할 것입니다. 이는 경로가 완전히 구문 분석되기 전에 선택한 경로에 액세스하는 데 도움이되므로. 그것이 어떻게 작동하는지 파헤쳐 봅시다.

라우팅 기본 사항

Navigation Guard는 VUE 라우터의 특정 기능으로 라우팅 해결 방법에 대한 추가 기능을 제공합니다. 그들은 주로 오류 상태를 처리하고 워크 플로를 갑자기 방해하지 않고 사용자를 원활하게 안내합니다.

Vue 라우터에는 Global Guards, Router 독점 경비원 및 구성 요소 가드의 세 가지 주요 범주가 있습니다. 이름에서 알 수 있듯이, 내비게이션 (즉, URL이 변경 될 때)을 트리거 할 때 글로벌 가드가 호출되며, 관련 경로를 호출 할 때 (즉, URL이 특정 경로와 일치 할 때) 경로 독점 가드가 호출되며 경로에서 구성 요소를 작성, 업데이트 또는 파괴 할 때 구성 요소 가드가 호출됩니다. 각 범주에는 응용 프로그램 라우팅을보다 세분화 할 수있는 다른 방법이 있습니다. 다음은 VUE 라우터의 각 탐색 가드에서 사용할 수있는 모든 방법을 빠르게 분석합니다.

글로벌 가드

• beforeEach : 경로에 들어가기 전에 작동 (이 범위에 액세스 할 수 없습니다)
• beforeResolve : 내비게이션 확인 전의 조치이지만 구성 요소 가드 후 (이 범위에 액세스 할 수있는 이전과 동일)
• afterEach : 라우팅 해상도 후 작동 (내비게이션에 영향을 줄 수 없음)

루트 독점 가드

• beforeEnter : 특정 경로에 들어가기 전의 작업 (글로벌 가드와 달리이 가드는이 액세스 할 수 있습니다).

구성 요소 가드

• beforeRouteEnter : 내비게이션 확인 전과 구성 요소 생성 전에 수행되는 작업 (액세스 할 수 없습니다)
• beforeRouteUpdate : 동일한 구성 요소를 사용하여 새 경로를 호출 한 후 수행 된 작업
• beforeRouteLeave : 경로를 떠나기 전에 작동합니다

라우팅을 보호하십시오

효과적으로 구현하려면 주어진 시나리오에서 언제 사용 해야하는지 아는 것이 도움이 될 것입니다. 예를 들어, 분석을 위해 페이지보기를 추적하려면 경로와 관련 구성 요소가 완전히 구문 분석 된 후 트리거되기 때문에 Global Afterach Guard를 사용할 수 있습니다. 경로 구문 분석 전에 데이터를 Vuex Storage로 프리 페치하려면 Preverenter Route 독점 가드를 사용하여 그렇게 할 수 있습니다.

이 예제는 사용자 액세스 권한을 기반으로 특정 경로 보호를 처리하기 때문에 구성 요소 가드 (예 : 전직 후크)를 사용합니다. 이 탐색 가드를 사용하면 구문 분석이 완료되기 전에 올바른 경로에 액세스 할 수 있습니다. 즉, 사용자가 통과하기 전에 데이터를 얻거나 데이터가로드되었는지 확인할 수 있습니다. 작동 방식에 대한 구현 세부 사항을 파헤 치기 전에 이전 엔터 훅이 기존 라우팅 파일에 어떻게 통합되는지 간단히 살펴 보겠습니다. 아래는 보호 된 경로를 포함하는 샘플 라우팅 파일입니다. 우리는 다음과 같이 이전에 엔터 후크를 추가 할 것입니다.

 Const Router = New Vuerouter ({{
  노선 : [
    ...
    {
      경로 : "/보호",
      이름 : "보호",
      구성 요소 : import (/ * WebPackChunkName : "Protected" */'./protected.vue "),
      전직 (To, From, Next) {
        // 여기에 논리}
    }
  ]]
})

라우팅 구조

이전 엔터의 구조는 Vue 라우터에서 사용 가능한 다른 내비게이션 가드와 다르지 않습니다. 세 가지 매개 변수를 수용합니다. to , 응용 프로그램이 탐색하는 "미래"경로; , 응용 프로그램이 떠나는 "현재/임박한 과거"경로 from ; next , 경로를 성공적으로 해결하기 위해 호출 해야하는 기능.

일반적으로 vue 라우터를 사용할 때 다음은 인수없이 호출됩니다. 그러나 이것은 영구적 인 성공 상태를 가정합니다. 우리의 경우, 우리는 무단 사용자가 보호 자원에 액세스 할 수없고 올바르게 리디렉션 할 수있는 대체 경로가 있는지 확인하고자합니다. 이렇게하려면 다음에 매개 변수를 전달합니다. 이렇게하려면 경로 이름을 사용하여 사용자가 무단으로 사용되는 경우 다음과 같습니다.

 다음({
  이름 : "대시 보드"
})

이 예에서는 사용자의 인증 토큰을 저장하는 Vuex 상점이 있다고 가정 해 봅시다. 사용자에게 권한이 있는지 확인하려면이 상점을 확인하고 적절하게 또는 경로를 통해 실패합니다.

 전직 (To, From, Next) {
  // Vuex Storage 확인 //
  if (store.getters [ "auth/haspermission"]) {
    다음()
  } 또 다른 {
    다음({
      이름 : "대시 보드"// 보안 경로로 돌아 가기 //
    });
  }
}

이벤트가 동시에 발생하고 Vuex 작업이 완료 될 때까지 경로가 조기로드되지 않도록하려면 내비게이션 가드를 변환하여 Async/Await을 사용해 봅시다.

 Async prectionenter (to, from the Next) {
  노력하다 {
    var haspermission = await store.dispatch ( "auth/haspermission");
    if (haspermission) {
      다음()
    }
  } catch (e) {
    다음({
      이름 : "대시 보드"// 보안 경로로 돌아 가기 //
    })
  }
}

출처를 기억하십시오

지금까지 우리의 내비게이션 가드는 무단 사용자를 출신의 위치 (즉, 대시 보드 페이지)로 리디렉션하여 보호 자원에 액세스하는 것을 방지하는 목적을 달성했습니다. 그럼에도 불구하고 그러한 워크 플로는 파괴적입니다. 리디렉션이 예상치 못한 것이므로 사용자는 사용자 오류라고 생각하고 경로에 반복적으로 액세스하려고 시도하여 궁극적으로 응용 프로그램이 손상되었다고 생각합니다. 이 문제를 해결하기 위해 사용자에게 언제, 왜 리디렉션되는지 알리는 메소드를 작성해 봅시다.

쿼리 매개 변수를 다음 함수로 전달하여이를 수행 할 수 있습니다. 이를 통해 보호 된 리소스 경로를 리디렉션 URL에 첨부 할 수 있습니다. 따라서 사용자가 앱에 로그인하거나 중지 된 위치를 기억하지 않고 올바른 권한을 얻도록 프롬프트하려면 그렇게 할 수 있습니다. 아래에 표시된 것처럼 to.fullpath.

 Async prectionenter (to, from the Next) {
  노력하다 {
    var haspermission = await store.dispatch ( "auth/haspermission");
    if (haspermission) {
      다음()
    }
  } catch (e) {
    다음({
      이름 : "로그인", // 보안 경로로 돌아 가기 //
      쿼리 : {redirectfrom : to.fullpath}
    })
  }
}

알림

사용자가 보호 된 경로에 액세스 할 수없는 워크 플로를 향상시키는 다음 단계는 오류와 문제 해결 방법 (로그인하거나 올바른 권한을 얻음)에 대해 알려주는 메시지를 보내는 것입니다. 이를 위해 구성 요소 가드, 특히 BeforourouteEnter를 사용하여 리디렉션이 발생했는지 확인할 수 있습니다. 라우팅 파일에 쿼리 매개 변수로 리디렉션 경로를 전달하기 때문에 라우팅 객체를 확인하여 리디렉션이 발생했는지 확인할 수 있습니다.

 BeforeRouteEnter (To, From, Next) {
  if (to.query.redirectfrom) {
    // 뭔가 //
  }
}

앞에서 언급했듯이 모든 내비게이션 가드는 옆에 전화를 걸어 경로를 해결해야합니다. 앞에서 보았 듯이 다음 기능의 장점은 우리가 객체를 전달할 수 있다는 것입니다. 당신이 알지 못하는 것은 다음 함수에서 vue 인스턴스에 액세스 할 수 있다는 것입니다. 우와! 이것은 다음과 같은 것입니다.

 다음 (() => {
  Console.log (this) // 이것은 vue 인스턴스입니다})

이전 인터를 사용할 때 기술적 으로이 범위에 액세스하지 않는다는 것을 알았을 것입니다. 이 경우 VM을 기능에 전달하여 VUE 인스턴스에 여전히 액세스 할 수 있습니다.

 다음 (vm => {
  console.log (vm) // 이것은 vue 인스턴스입니다})

이제 추가 구성없이 관련 오류 메시지로 데이터 속성을 쉽게 작성하고 올바르게 업데이트 할 수 있기 때문에 특히 편리합니다. 이 방법을 사용하면 다음과 같은 구성 요소가됩니다.

<template><div>
    {{errormsg}}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "对不起，您没有访问请求路由的权限"
      })
    } else {
      next()
    }
  }
}
</script>

결론적으로

인증을 응용 프로그램에 통합하는 프로세스는 까다로울 수 있습니다. 우리는 무단 사용자가 경로에 액세스하는 것을 방지하는 방법과 사용자 권한을 기반으로 워크 플로우를 구축하여 사용자를 보호 된 리소스로 리디렉션하는 방법을 설명합니다. 지금까지 우리의 가정은 응용 프로그램에서 인증을 구성했다고 가정합니다. 아직 구성하지 않았고 신속하게 작동하고 실행하려면 인증을 서비스로 사용하는 것이 좋습니다. NetLify의 인증 위젯 또는 Auth0의 잠금과 같은 일부 제공 업체가 있습니다.

위 내용은 내비게이션 가드로 VUE 경로 보호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!