Vue는 토큰이 만료된 후 로그인 페이지로 이동하기 위해 토큰을 사용합니다.

Vue2.0의 라우팅 후크는 주로 탐색을 가로채서 경로 가드로 이해되기 전에 점프를 완료하거나 취소하도록 하는 데 사용됩니다. 이 기사에서는 주로 라우팅 후크 토큰을 사용하여 토큰이 만료된 후 로그인 페이지로 이동하는 Vue의 예를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

글로벌 내비게이션 후크, 개별 경로 전용 후크, 구성 요소 내 후크로 구분됩니다.

세 가지 유형의 후크는 모두 서로 다른 위치에서 사용됩니다. 이 함수는 세 가지 매개 변수, 즉 to, from, next를 전달합니다.

다음 메소드에는 세 가지가 있습니다

(1)next(); //기본 경로

(2)next(false); //경로 점프 방지

(3)next({path:'/'} ;

//路由前验证
  beforeRouteEnter(to, from, next) {
   let postdata = {
    meta: {
     client_version: "1.0",
     client_type: "1",
    },
    data: {
     access_token: $.cookie("authtoken").toString()
    }
   }

   $.ajax({
    url: urls.serchuser,
    type: 'POST',
    data: JSON.stringify(postdata)
   }).done(data => {
    data = JSON.parse(data);
    console.log(data);
    if(data.status == 10050) {
     next(false);
     location.href = 'login.html';
    }else{
     next();
    }
   })
  }

구현 방법은 매우 간단합니다. 라우팅하기 전에 서버에 요청을 보냅니다. 반환된 데이터에 토큰이 만료되었음을 나타내면 기본 점프가 방지되고 그렇지 않으면 정상적으로 점프됩니다.

관련 권장사항:

Vue-resource 인터셉터가 토큰 유효하지 않은 점프를 결정합니다

PHP의 WeChat 공개 계정 확인 토큰, 응답 내용, 푸시 메시지 방법

자세한 설명 예시 jQuery Ajax는 토큰을 사용하여 신원을 확인합니다

위 내용은 Vue는 토큰이 만료된 후 로그인 페이지로 이동하기 위해 토큰을 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!