Vue インターセプターの原理と詳細な使用法

インターセプターの原理と機能

まず、インターセプターは src/utils/request.js ファイル内にあり、インターセプターはリクエストインターセプターとレスポンスインターセプターに分割されます。
ページ内のすべてのリクエストはリクエストインターセプトとレスポンスインターセプトを通過するため、通常はこのファイルで操作されます。
このファイルは通常、axios、vuex、Message、ルーターおよび関連メソッド、ベースアドレス + インターセプターを導入します。
リクエストインターセプター: トークンアクティブ処理では、リクエストヘッダートークンを各リクエストに追加し、リクエストに例外をスローします。
レスポンスインターセプター: 簡素化された Axios は、リクエストの例外を受動的に処理するために、デフォルトでデータトークンのレイヤーを追加します。

最小バージョン

// 导入axios
import axios from 'axios'

// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超时
  timeout: 10000
})

// 请求拦截
request.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
request.interceptors.response.use(
  res => {
    return res
  },
  // 响应错误的代码写这里
  error => {
    return Promise.reject(error)
  }
)

// 暴露副本
export default service

実際の開発では以下を使用します

知らせ：

axios を使用すると、デフォルトでデータのレイヤーが追加されます。このようにして、データを取得するときに、データが応答したことを判断できるように無効なコードを増やし、次のように、返されたデータを判断するために他のレイヤーを人為的に削除して、res.data.変数を直接実行できるようにします。

もう 1 つはトークン処理です。これにはアクティブな処理が含まれます。つまり、ログイン時に時間を節約し、時間を判断し、時間を超えた場合にログアウトメソッドを呼び出し、情報を求め、ログインページに戻ります。受動的処理: 例外が発生したかどうかを判断し、バックエンドで指定されたトークン有効期限ステータスコード (401 など) の場合は、ログアウトメソッドを呼び出し、メッセージを表示し、ログインページに戻ります。

環境ファイルを変更することですぐにアドレスを変更できるように、ベースアドレスは変数名を暗記しないことが最善です。

// 导入axios
import axios from 'axios'
// 导入提示信息
import { Message } from 'element-ui'
// 导入vuex
import store from '@/store'
// 导入路由
import router from '@/router'
// 导入获取时间和token的工具函数
import { getToken, getTokenTime } from '@/utils/auth'

// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超时
  timeout: 10000
})
// 请求拦截
// 添加一个service的请求拦截器
service.interceptors.request.use(
  async config => {
    // config就是本次发请求的信息
    // 判断有没有token
    if (store.state.user.token) {
      // token失效的主动处理
      // 获取一下记录token的时间
      let start = getTokenTime()
      // 获取一下当前时间
      let now = Date.now()

      // 算出时间差
      let hour = (now - start) / 1000 / 3600

      // 判断是否超过1小时
       if (hour >= 1) {
         // 代表token过期
         await store.dispatch('user/logout')
         Message.error('token已过期,请重新登录')
         router.push('/login')
      // return代表不往下执行，所以这个请求不会发送
         return
       }
       config.headers.Authorization = 'Bearer ' + getToken()
      config.headers['Bearer'] = getToken()
      // config.headers.tenantid =  getTenantId ()
    }
    // 发送请求
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截
service.interceptors.response.use(
  res => {
    // axios默认加了一层data
    // 这个res包括这个请求响应回来的所有信息
    // 所有的接口请求都会回到这里
    // 获取到本次请求得到的数据
    const data = res.data
    // 会帮所有的请求打印
    // console.log(data);
    // 判断本次请求是否成功
    if (data.code === 200 || data.code == 0) {
      // 如果响应成功，则正常给他返回数据
      return data
    } else {
      // 证明失败，我们需要让外面的catch被调用
      // 要让catch被调用，就要手动抛出一个错误，并把服务器返回的消息抛回去
      Message.warning(data.message || data.msg)
      return Promise.reject(data.message)
    }
  },
  async error => {
    // token失效的被动处理
    console.log(error)
    if (error.response.data.code === 401) {
      await store.dispatch('user/logout')
      Message.warning('登录状态过期，请重新登录！')
      router.push('/login')
    } else {
      return Promise.reject(error)
    }
  }
  // error => {
  //   return Promise.reject(error)
  // }
)
// 暴露副本
export default service

ブラウザアクセス

要約:

このプロセスを経て、Vue インターセプターの原理と詳細な使用方法について予備的な印象が深くなったと思いますが、実際の開発で遭遇する状況は異なるはずです。そのため、刻々と変化する Vue インターセプターの原理を理解する必要があります。ルーツ。さあ、労働者を殴ってください！

不備があればご指摘ください、ありがとうございます -- Fengguowuhen