vue-router를 체크인합니다.각자가 루트에 대한 접근을 제한하지 않습니다.

vue-router를 체크인합니다.각자가 루트에 대한 접근을 제한하지 않습니다.

먼저 웹 팩, vue-router(이력 모드 - SPA 사이트) 및 핫 모듈 로딩으로 웹 팩 개발 서버에서 실행되는 vuej 2.0을 사용하고 있습니다.

컴포넌트에 약 10개의 루트가 매핑되어 있습니다.사이트는 정상적으로 동작하고 있습니다만, 토큰 베이스의 인증을 추가하고 있습니다.토큰 체크를 수행하기 위해 각각 라우터를 사용하고 있습니다.토큰이 유효하면 통과시킵니다.토큰이 유효하지 않은 경우 토큰은 /login 페이지로 리다이렉트 됩니다.문제는 처음에 체크를 실행하고 제한한다는 것입니다.그러나 두 번째 시도에서는 페이지로 이동하여 내용을 표시할 수 있습니다.1초마다 루트가 정상적으로 처리되어 /login으로 리다이렉트 됩니다.제 수표Token() 함수는 테스트 목적으로 항상 false를 반환합니다.

코드:

// Configure Router
const router = new Router({
    routes, //routes are configured elsewhere, they work fine so not needed
    mode: 'history'
})

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
            // next('/login');
            // router.push('login');
        }
    } else {
        logger('You\'re on the login page');
    }
    next();
});


function checkToken() {
    return false;
}

메인 페이지("/")로 이동하면 예상대로 /login으로 리디렉션됩니다.콘솔에는 다음 2개의 엔트리가 있습니다.

[ 14 : 36 : 30 . 399 ] : 토큰이 없습니다.로그인으로 리다이렉트 합니다.( / ) [ 14 : 36 : 30 . 399 ] :로그인 페이지입니다

괜찮은 것 같네요."/" 로드를 시도했지만 토큰이 없는 것을 확인한 후 /login으로 리디렉션되었습니다. 여기서 체크는 로그인 페이지에 표시된 것을 확인하고 중지합니다.

[ Projects ]링크를 클릭하면 /project로 이동합니다.콘솔 출력:

[ 14 : 40 : 21 . 322 ] : 토큰이 없습니다.로그인으로 리다이렉트 합니다.(/프로젝트)

완벽하지만 실제로는 로그인 페이지가 아니라 프로젝트 페이지가 표시됩니다.

이제 사이트 링크를 클릭하여 /site로 이동합니다.콘솔 출력:

[ 14 : 41 : 50 . 790 ] : 토큰이 없습니다.로그인으로 리다이렉트 합니다.(/site) [ 14 : 41 : 50 . 792 ]: 로그인 페이지입니다.

보기에도 좋고 브라우저에 사이트 페이지가 표시됩니다.이게 바로 내가 보고 싶었던 거야.

이제 /requests 링크를 클릭하겠습니다.콘솔 출력:

[ 14 : 44 : 13 . 114 ] : 토큰이 없습니다.로그인으로 리다이렉트 합니다.(/요청)

다시 한 번 말하지만, 방향 전환이 되지 않습니다.로그인 페이지가 표시되어야 할 시간에 요청 페이지가 표시됩니다.

이번에는 로그인 페이지가 아닌 프로젝트 페이지가 잘못 표시된 프로젝트 링크를 다시 클릭합니다.콘솔 출력:

[ 14 : 47 : 12 . 799 ] : 토큰이 없습니다.로그인으로 리다이렉트 합니다.(/project) [14:47:12.800] : 로그인 페이지입니다.

이번에는 정상적으로 /login 페이지로 리다이렉트 되었습니다.

순서나 클릭하는 링크에 관계없이 클릭하는 다른 모든 링크가 적절히 리다이렉트 됩니다.첫 번째는 리다이렉트, 두 번째는 리다이렉트, 세 번째는 리다이렉트, 네 번째는 리다이렉트, 다섯 번째는 리다이렉트...

next('/login'), next('login'), router.push('login')를 시도했는데 모두 같은 결과입니다.언제 리다이렉트해야 하는지 알 수 있지만 리다이렉트는 두 번밖에 작동하지 않습니다.

풀 요구(페이지 리프레시, 주소 입력, Enter 누름)를 실행하면 항상 계획대로 /login으로 리다이렉트되지만 SPA를 사용하여 리다이렉트하려고 합니다.내가 뭘 놓친거야?

고쳤어. 내쪽은 무시해.

라우터 코드는 다음과 같습니다.

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
        }
    } else {
        logger('You\'re on the login page');
        next(); // This is where it should have been
    }
    // next(); - This is in the wrong place
});

바보같은 문제, 간단한 대답에, 난 내 생각을 가지고 있었다.next()잘못된 장소에 배치되어 있기 때문에 항상 마지막에 처리를 하고 있었습니다.하지만 왜 제대로 방향을 바꾸었는지 아직도 궁금해요.

언급URL : https://stackoverflow.com/questions/43378726/checks-in-vue-router-beforeeach-not-restricting-access-to-routes