vueのリクエストインターセプトとは何ですか?

はじめに

フロントエンド テクノロジの急速な発展に伴い、フロントエンド フレームワークはますます多様化しており、人気のあるフロントエンド MVVM フレームワークとして、Vue.js は新しい開発者を魅了し続けています。 Vue.jsキャンプ。 Vue.js では、サーバーからデータを取得するために AJAX リクエストを使用することがよくありますが、リクエストを送信する前に、リクエストの合法性とセキュリティを確認する必要があります。これには、Vue.js のリクエスト インターセプト メカニズムを使用する必要があります。この記事では、Vue.js のリクエスト インターセプト メカニズムについて詳しく説明します。

リクエストインターセプトとは何ですか?

Vue.js では、通常、AJAX リクエストのライブラリとして axios を使用します。 Axios は、リクエストが送信される前にリクエストをインターセプトして変更できるリクエスト インターセプト メカニズムを提供します。リクエスト インターセプターを使用すると、リクエスト ヘッダーにトークンを追加したり、リクエストの前にアクセス許可の検証を行ったりするなど、リクエストを送信する前に何らかの処理を行うことができます。

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

まず、axios と Vue を導入する必要があります:

import axios from 'axios'
import Vue from 'vue'

次に、axios インスタンスを定義できます:

const Axios = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

Next 、Vue にすべてのリクエストをインターセプトさせる必要があるため、構成ファイルでグローバル インターセプターを設定する必要があります。 src フォルダーの下に interceptors という新しいフォルダーを作成し、interceptors フォルダーの下にindex.js という新しいファイルを作成します。

import Axios from '@/utils/axios'

// 请求拦截器
Axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  return config
})

// 响应拦截器
Axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

Vue.prototype.$http = Axios

export default Axios

このコードでは、リクエスト インターセプターとレスポンス インターセプターを定義します。リクエスト インターセプターでは、ローカルに保存されたトークンを取得し、それをリクエスト ヘッダーに追加します。

レスポンス インターセプタの場合、リクエストが成功するとレスポンス データが直接返され、リクエストが失敗した場合は Promise.reject が返され、エラー メッセージがスローされます。

最後に、main.js ファイルで interceptors/index.js ファイルを参照する必要があります。

import Axios from '@/interceptors'

// 将 Axios 挂载到 Vue 实例上
Vue.prototype.$http = Axios

この時点で、Vue.js リクエスト インターセプトの実装は正常に完了しました。コードから、リクエスト インターセプト メカニズムが Vue.js アプリケーションに非常に役立ち、開発効率を大幅に向上させることができることがわかります。

概要

この記事では、Vue.js のリクエスト インターセプト メカニズムを紹介します。インターセプターを使用すると、リクエストが送信される前にインターセプトして変更することができます。このようにして、リクエスト ヘッダーにトークンを追加したり、リクエストの前にアクセス許可の検証を行ったりするなど、リクエストを送信する前に何らかの処理を行うことができます。 Vue.js アプリケーションではインターセプトを伴うリクエストが避けられないため、リクエストのインターセプト方法を習得することが非常に重要です。

以上がvueのリクエストインターセプトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。