Vue.js에서 클라이언트 측 경로를 보호하는 방법은 무엇입니까?

Question

나는 junewebtokens를 사용하는 순수 json 백엔드와 대화하는 프런트 엔드 프레임 워크로 Vue.js를 사용하는 스파를 만들고 있습니다. 나는 반응 생태계에 대해 더 잘 알고있다. 현재 Vue.js에서 클라이언트 측 경로를 어떻게 보호할지 모르겠습니다. (프레임 워크에 대한 내 결정이 아닙니다. 저는 새로운 고용입니다. 예!)

반응에서 나는 이와 같은 것을 할 것입니다. 프로젝트의 index.js 파일에 있습니다. 앱이 마운트되기 전에 localstorage에 jsonwebtoken이 있는지 확인하십시오. 존재하는 경우, redux 상태를 로그인으로 설정하십시오. 로그 아웃으로 설정되지 않은 경우.

그러면 사용자가 클라이언트 측 보호 경로를 입력하려고 할 때마다 로그인 한 상태를 검사하는 componentWillMount 수명주기 방법을 사용할 수 있도록 경로를 보호하기 위해 상위 구성 요소를 사용합니다. 로그인 한 경우 구성 요소를 렌더링하십시오. 다른 페이지로 이동하려면 리디렉션하십시오.

vue의 상위 구성 요소가 동일한 동작을 수행 할 수없는 것으로 보입니다. 또는 나는 그것을 달성하는 방법을 보여주는 문서를 찾을 수 없다. 누군가이 문제를 어떻게 해결할 수 있을까요? 여기, link

더 구체적으로 탐색에 대한 매뉴얼입니다 :

Answer 1

이 Vue.js를 사용하여 인증 구현의 좋은 예입니다. 가드 : 구성 요소의

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     // this route requires auth, check if logged in 
     // if not, redirect to login page. 
     if (!auth.loggedIn()) { 
      next({ 
       path: '/login', 
       query: { redirect: to.fullPath } 
      }) 
     } else { 
      next() 
     } 
    } else { 
     next() // make sure to always call next()! 
    } 
}) 

또는 위해 : link

Answer 2

으로 당신이 인증

문서에서 제공하는 예제를 확인하고자하는 모든 노선에서 메타 feilds에게를 사용할 수있는 documentation 설명 내비게이션 경비원은 wostex에서 제공하는 두 번째 링크를 따를 수 있습니다.