vueでaxiosがtoken検証をどのように実現するか

1618 ワード

前回のAuth認証に続いて、各ジャンプページはバックエンドでtokenの存在を検証します.
そしてその夜はAuthを真似てリクエストを送信することで成功した(前編末尾の方式)が、今日は続き、ページごとにtoken検証を送信するのは面倒なことに気づいた
またaxiosが登場しますaxiosがerrorブロックのようにhttp requestリクエストをブロックすることでrequestのたびにtokenをデフォルトで追加できます(もちろん、sessionにtoken検証文字列が格納されていることが前提です)

// main.js  
// http request    
axios.interceptors.request.use(
  config => {
    var token = sessionStorage.getItem('token');
    if (token) {  //       token，      ，   http header   token
      token =sessionStorage.getItem('token')+':';
      config.headers.Authorization = `Basic ${new Buffer(token).toString('base64')}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

どうして「:」?ここで最初はコロンを付けていませんでしたが、新しく追加されたrequestページ表示401を発見しましたが、メッセージヘッダにAuthorizationが付いているのに、よく見るとこのtokenと他のいくつかのページの違い(他のいくつかのページのtokenはその夜の方法でaxiosで直接送信されたので)が正しいtokenを復号するのはコロンが欠けていることに気づきました.具体的な理由は、文書を見ると合理的な解釈(正しいかどうか分からない)が見つかったようだ.
新しいverify_passwordコールバック関数は2回認証を試みます.まずusernameパラメータをトークンとして認証します.検証に合格しなかった場合は、パスワード認証に基づくようにusernameとpasswordを検証し、ドキュメントcurlの例は次のフォーマットに似ています.

$ curl -u eyJhbGciOiJIUzI1NiIsImV4cCI6MTM4NTY2OTY1NSwiaWF0IjoxMzg1NjY5MDU1fQ.eyJpZCI6MX0.XbOEFJkhjHJ5uRINh2JA1BPzXjSohKYDRT472wGOvjc:unused -i -X GET http://127.0.0.1:5000/api/resource
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 30
Server: Werkzeug/0.9.4 Python/2.7.3
Date: Thu, 28 Nov 2013 20:05:08 GMT

{
  "data": "Hello, miguel!"
}

このtoken:unusedのフォーマットを見てrequestにコロンを付けます
転載先:https://www.cnblogs.com/bay1/p/10982379.html

axiosブロッキングはhttpリクエストをカプセル化し、token再送リクエストをリフレッシュする

リングプログレスバーの実装(CSS 3+jQuery/Vue)