Vue は有効期限が切れた後にトークンを使用してログイン ページにジャンプします

Vue2.0 のルーティング フックは主にナビゲーションをインターセプトし、ルート ガードとして理解される前にジャンプまたはキャンセルを完了させるために使用されます。この記事では主に、ルーティング フック トークンを使用してトークンの有効期限が切れた後にログイン ページにジャンプする Vue の例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

グローバルナビゲーションフック、個別ルート専用フック、コンポーネント内フックに分かれています。

3 種類のフックはそれぞれ異なる場所で使用され、関数は 3 つのパラメーター、つまり to、from、next を受け取ります。

nextメソッドは3つあります

(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 は有効期限が切れた後にトークンを使用してログイン ページにジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。