Vue でリクエストインターセプトのホワイトリストを実装する方法

はじめに

Vue を開発に使用するプロセスでは、ネットワーク リクエストをインターセプトする必要がある状況に遭遇します。また、一部のリクエストをインターセプトから除外する必要がある、つまりホワイトリストも必要になります。この記事では、Vueのリクエストインターセプトホワイトリストの実装方法を紹介します。

本文

Vue で開発する場合、通常、ネットワーク リクエストの送信には axios を使用しますが、axios ではネットワーク リクエストのインターセプターをカスタマイズできます。カスタム インターセプターは、ネットワーク リクエストを送信する前にリクエスト構成を変更したり、リクエストの応答後に応答結果を処理したりするのに役立ちます。

Vue リクエスト インターセプターの基本的な使用法

Vue では、まず axios をインストールして導入する必要があります:

npm install axios -S

import axios from 'axios'

その後、axios を設定し、リクエスト インターセプターとレスポンス インターセプターを設定します。 :

axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});
 
axios.interceptors.response.use(
  response => {
    // 处理响应数据做一些事情
    return response;
  },
  error => {
    // 处理响应错误做一些事情
    return error;
});

リクエスト インターセプターの config オブジェクトには、現在のリクエストに関連する情報が含まれています。リクエスト ヘッダー情報の追加など、インターセプターでこのオブジェクトを変更できます。

レスポンスインターセプタ内のレスポンスオブジェクトにはネットワークリクエストの戻り情報が含まれており、エラーコードの判定など、このオブジェクトを変更することもできます。

Vue リクエスト インターセプト ホワイトリストの実装

特定のシナリオでは、特定のリクエストをインターセプトしたくない場合があります。現時点では、リクエスト インターセプターを変更してホワイトリスト機能を実装する必要があります。

リクエスト インターセプターでは、現在のリクエストの URL がホワイトリストに含まれているかどうかを判断することで、現在のリクエストをインターセプトするかどうかを決定できます。ここでは、ホワイトリスト リストを定義し、リクエスト インターセプターで判断する必要があります。

const whitelist = ['/login', '/register']; // 定义白名单
axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    if (whitelist.indexOf(config.url) === -1) { // 当前请求不在白名单之中，进行拦截
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = token;
      } else {
        window.location.href = '/login';
      }
    }
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});

上記のコードでは、まずホワイトリスト リストを定義し、次にリクエスト インターセプターを使用して現在のリクエストの URL を確認します。 . 現在のリクエストがホワイトリストにない場合は判断してインターセプトします。このインターセプターでは、ローカル トークンの取得、リクエスト ヘッダーへの Authorization フィールドの追加など、いくつかのロジック コードも追加しました。

上記のコードでは、要求された URL がホワイトリストにない場合、それはインターセプトされ、インターセプト中に次の操作が実行されます:

1. ローカル トークンを取得します。 。
2. トークンがローカルに存在するかどうかを確認し、存在しない場合はログイン ページにジャンプします。
3. トークンがある場合は、ヘッダーに Authorization フィールドを追加して、それをバックエンドに渡します。

上記の操作を完了した後、処理された構成オブジェクトを返すと、リクエストの送信が継続されます。

概要

Vue リクエスト インターセプターのアプリケーションは非常に柔軟であり、カスタム インターセプターを通じて、いつでもネットワーク リクエストを変更およびインターセプトでき、同時にホワイトリスト機能を実現できます。特定のリクエストを傍受から除外します。実際のプロジェクト開発では、リクエスト インターセプトのホワイトリストは必須の機能であるため、リクエストのホワイトリストを実装するにはリクエスト インターセプト インターセプターをカスタマイズする方法を学ぶ必要があります。

以上がVue でリクエストインターセプトのホワイトリストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。