Vue.js에서 클라이언트 측 루트를 보호하는 방법

Vue.js에서 클라이언트 측 루트를 보호하는 방법

저는 지금 프런트 엔드 프레임워크로서 Vue.js를 사용하는 스파를 구축하고 있습니다.이 프레임워크는 jsonwebtokens를 사용하는 순수 json 백엔드와 통신합니다.저는 React 생태계에 더 익숙합니다.현재 Vue.js에서 클라이언트 측 루트를 어떻게 보호해야 할지 잘 모르겠습니다(프레임워크에 대한 결정은 아닙니다).나는 신입사원이야. 야호!)

그 반응으로 나는 이런 일을 하곤 했다.프로젝트의 index.js 파일.앱을 마운트하기 전에 로컬 저장소에 jsonwebtoken이 있는지 확인합니다.있는 경우 redux 상태를 login으로 설정합니다.로그아웃으로 설정되어 있지 않은 경우.

다음으로 상위 컴포넌트를 사용하여 루트를 보호함으로써 사용자가 클라이언트 측 보호 루트로 들어가려고 할 때마다 로그인 상태를 체크하는 componentWillMount 라이프 사이클 방식을 사용합니다.로그인한 경우 컴포넌트를 렌더링합니다.그렇지 않으면 로그인 페이지로 리디렉션합니다.

vue의 고차 컴포넌트는 동일한 동작을 할 수 없는 것 같습니다.또는, 그것을 실현하는 방법을 나타내는 문서를 찾을 수 없습니다.누가 이 문제에 어떻게 대처해야 하는지 알려주시겠어요?

설명서에서 설명한 바와 같이 인증을 확인하는 모든 경로에서 메타 필드를 사용할 수 있습니다.

문서에 기재되어 있는 예를 다음에 나타냅니다.

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()! 
    } 
}) 

또는 컴포넌트 네비게이션 가드에서는 Wostex에서 제공하는 두 번째 링크를 따라갈 수 있습니다.

메타필드에 대한 문서를 놓친 것 같아요바보같은 짓을 하고 있었지만 효과가 있었던 것 같아요ㅎㅎ.

router.beforeEach((to, from, next) => {
    let web = ["home", "login", "verifyAccount", "resetPassword","forgotPassword","register"];
    if(web.includes(to.name)){
        next();
    }else{
        axios.post('/api/auth/verify-token',{
            token: localStorage.token
        }).then(response=>{
            if(response.data.verification === true){
                next();
            }else{
                router.push({
                    name:'home',
                    params:{
                        serverError:true,
                        serverMsg: 'Please login to continue.'
                    }
                });
            }
        }).catch(response=> {
            console.log(response);
        });
    }
});

다음 예시는 Vue.js를 사용한 인증 구현의 좋은 예입니다.link

좀 더 구체적으로 말하면, 여기 내비게이션에 대한 매뉴얼이 있습니다. 가드: 링크

언급URL : https://stackoverflow.com/questions/43424302/how-to-protect-client-side-routes-in-vue-js