루트의 Vue 라우터 보안

루트의 Vue 라우터 보안

저는 Vue를 2주 동안 배우고 있는데, 라우팅 보안에 관한 이 질문에 대한 답을 찾을 수 없습니다.

시험과 같은 메타 필드와 라우팅 가드를 사용하여 Vue에서 루트를 보호할 때 클라이언트가 컴포넌트를 보기 위해 무엇을 할 수 있는지 궁금합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})



router.beforeEach((to, from, next) => {
  // check if authenticated by jwt from store or localstorage
})

루트/foo/bar에 의해 보호됩니다.각 후크 및 요구 사항Auth 메타필드.그러나 이 모든 코드는 클라이언트 측에 있습니다(미니화된 버전이지만 아직 존재합니다).사용자가 코드를 변경하여 구성 요소를 볼 수 있습니다.
사용자가 개인 정보를 얻을 수 없도록 백엔드의 모든 API 루트를 다시 보호해야 한다는 것을 알고 있습니다.단, 사용자는 보호된 컴포넌트를 볼 수 있습니다.
사용자로부터 컴포넌트를 100% 안전하게 숨길 수 있는 방법은 없는 것 같습니다.

사용자가 프런트 엔드 코드를 변경하면 컴포넌트가 표시됩니다.

그러나 이러한 데이터에 대한 액세스를 제한하는 백엔드로 인해 해당 구성 요소를 채우는 데이터는 볼 수 없습니다.

백엔드가 이를 제한하지 않는 경우 Vue와 독립적으로 큰 보안 결함입니다( 공격자가 JS 클라이언트 없이 API에 직접 요청할 수 있음).

루트에 관한 한, 실행하고 있는 인증은 워크플로우/사용성에 관한 것입니다.일반적으로 프런트 엔드 코드의 변경을 막을 방법이 없기 때문입니다.미니메이션 + uglimation을 사용하여 더 어렵게 만들 수 있지만, 그것뿐입니다.(보통 미니메이션은 보안상의 이유뿐만 아니라 퍼포먼스 향상을 위해 이루어집니다.)

앱을 청크로 나누려면 Vue-Router/Lazy 로드 Routes를 참조하십시오.

번들러로 앱을 빌드하면 JavaScript 번들이 상당히 커지기 때문에 페이지 로드 시간에 영향을 미칠 수 있습니다.각 루트의 컴포넌트를 다른 청크로 분할하여 루트가 방문되었을 때만 로드하는 것이 효율적입니다.

기술적으로 청크를 보호할 수 있으며 특정 권한에만 다운로드할 수 있습니다.하지만 당신은 이것을 성취하기 위해 필요한 작업이 정말로 가치가 있는지 자문해야 한다.

언급URL : https://stackoverflow.com/questions/49223438/vue-router-security-of-routes