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のWeChatパブリックアカウント検証トークン、返信コンテンツ、プッシュメッセージメソッド

例の詳細な説明 jQuery Ajaxはトークンを使用してIDを検証します

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