vue.jsブロッキングを追加しtoken認証を実現(axiosを使用)

tokenって何?
tokenはユーザーがカスタマイズした任意の文字列であり、現在開発中、tokenはサービス側で生成され、tokenの値はサーバのバックグラウンドに保存されています.サーバとクライアントだけがこの文字列を知っているので、このtokenは両者の間の鍵となり、サーバに要求がクライアントから来たのか悪意のある第三者から来たのかを確認することができます.
なぜtokenを使うのですか?
簡単に言えば、tokenの使用はデータセキュリティのためであり、フロントはインタフェースパス(URL)の呼び出しによってデータを取得し、悪意のある第三者がインタフェースパスを知っていれば、彼は直接インタフェースパスを通じてウェブページ上でそのインタフェースのすべてのデータ情報を直接取得することができる.tokenが追加されている場合、このような悪意のある行為は発生しません.tokenは、ユーザがログインしたときに生成され、フロントでシステムにログインしてtokenを取得した後、フロントは、その後の各リクエストが「トークン」を持っていることを確認するために、リクエストヘッダにtokenを設定する必要があります.もちろん、バックグラウンドのインタフェースリクエストにもリクエストヘッダが設定されています.(バックグラウンドにtokenを生成し、そのtokenの設定や記憶に興味がある場合は、次の記事に注目してください~~~)
token検証に基づくプロセス

クライアントはユーザ名とパスワードを使用して

へのログインを要求する.

サービス側は要求を受け取り、ユーザー名とパスワードを検証する(バックグラウンドは要求に従ってデータベースに行ってそのユーザーがいるかどうかを検索する)

.

検証に成功すると、サービス側は、Redisデータベースに格納され、有効期限を設定するtokenを発行し、クライアント

に送信します.

クライアントがtokenを受信と、一般的にlocalStorage(HTML 5の新しい特性は、格納コンテンツを手動で削除しない限り、格納情報は常に存在する)に

が格納.

クライアントは、サービス側にリソースを要求するたびに、サービス側が発行するtoken

を有する必要がある.

サービス側は、要求を受信し、クライアント要求に含まれるtoken(tokenがそのユーザのトークンであるかどうか、tokenが有効であるかどうかなど)を検証し、検証に成功すると、要求されたデータ

をクライアントに返す.
axiosとは?
AxiosはpromiseベースのHTTPライブラリで、ブラウザやnode.jsで使用できます.
公式サイト:www.axios.com/
日文ドキュメント:www.kancloud.cn/yunye/axios...
vue axiosブロック、token検証を実現
これらの基礎知識とプラグインを簡単に紹介した後、今日のトピックであるtoken検証を開始します.
まず、vue.jsでaxios、npm install axiosをダウンロードし、main.jsファイルでグローバルに使用します.

import axios from 'axios';
Vue.prototype.$http = axios;

このように導入されると、$httpを使用して他のファイルでインタフェースを呼び出すことができる.

getRoomDetail() {
        this.$http.get(this.roomDetailApi).then(
          res => {
            this.roomDetail = res.data.data;
          },
          err => {
            console.log("      " + err);
          }
        ).catch(err => {
          console.log("     " + err);
        })
      }

以上の手順は、フロント・バックグラウンドのインタラクション(フロントでバックグラウンド・インタフェースを呼び出してデータを取得する)を簡単に実現しただけで、tokenの検証を実現するためにさらに学習します.
上記の説明によれば、バックグラウンドに正常にログインし、返されたtokenを取得した後、localStorageグローバルストレージを使用する必要があります.実装コードは以下の通りです.

 //     
      login() {
        this.postData = {
          account: this.userInfo.account,
          password: this.$md5(this.userInfo.password),
        };
        this.$http.post(configIp.apiConfig.user.login, this.postData)
          .then(res => {
            if (res.data.errno === 0) {
              this.$Message.success('    ');
              this.$router.push('roomInfo');
              //    token
              window.localStorage["token"] = JSON.stringify(res.data.data.token);
            } else {
              this.$Message.error('    ');
              this.forgetPassword = true;
            }
          }).catch(err => {
          console.log("    ");
        })
      },

次に、リクエストヘッダを設定し、その後のインタフェースリクエスト中にtokenの認証でデータを取得し、http.jsファイル(ブロッカー)を追加します.

import axios from 'axios';
import router from './router';

// axios   
axios.defaults.timeout = 8000;
axios.defaults.baseURL = 'https://api.github.com';

// http request    
axios.interceptors.request.use(
  config => {
    if (localStorage.token) { //  token    
      config.headers.Authorization = localStorage.token;  // token      
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response    
axios.interceptors.response.use(
  response => {
    if (response.data.errno === 999) {
      router.replace('/');
      console.log("token  ");
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);
export default axios;

ブロッキングを追加したら、main.jsファイルを変更します.

import axios from 'axios';
Vue.prototype.$http = axios;

変更後:

import http from './http';  //   http     
Vue.prototype.$http = http;

この手順が完了すると、基本的な操作が実行されます.次に、リクエストヘッダが追加されたかどうかを確認します.
以上の操作でリクエストヘッダtokenの追加が実現され、その後のリクエストでは、自動的にそのリクエストヘッダが追加されますが、各ページにログイン権限が必要かどうか(バックグラウンドではtoken検証を必要としないフィルタが実現されます)、フロントでもルーティングのmetaラベルで検証が必要なルーティングページをマークする必要があります.他のページでは検証は必要ありません.コードは以下の通りです.

{
  path: '/userInfo',
  name: 'userInfo',
  meta: {
    requireAuth: true,  //           
  }
  component: userInfo
}, {
  path: '/userList',
  name: 'userList',    //                
  component: userInfo
}

その後、ルーティング防衛を定義することができます.ルーティングがジャンプするたびに、権限チェックを行います.参照コードは次のとおりです.

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  //              
    if (localStorage.token) {  //      token    
      console.log("token  ");
      next();
    } else {
      console.log("token   ");
      next({
        path: '/login', //       path    ，           
        query: {redirect: to.fullPath}
      })
    }
  }
  else { //          ，        
    next();
  }
});

これにより,vue.jsでフロント追加要求ヘッダを実装し,axios設定ブロックでtokenを追加することで実現した.
Node.js実装によるtoken生成,token処理などの操作に興味があるなら,次の記事に注目したい~~~~