Vue ネットワークでインターセプターをリクエストするにはどうすればよいですか?

この記事では、主に Vue ネットワーク リクエストにおけるインターセプターの実際的な応用方法を紹介し、参考にしていきます。

プロジェクトの背景

最近、プロジェクト開発中に次の問題に遭遇しました:

1. Minggan 操作を実行する前に、各リクエストはトークンを運ぶ必要がありますが、トークンには有効期間があり、トークンの有効期限が切れたら新しいものに置き換えて、リクエストを続行します。

要件分析

1. 各リクエストはトークンを運ぶ必要があるため、axios リクエスト インターセプターを使用して、各リクエストを何度もコピーして保存できるようにします。コードを貼り付けます。

2. トークンの無効化の問題。トークンの有効期限が切れると、サーバーはトークンが無効であるなどの特定のエラー表示を返しますが、リクエストのたびにトークンを更新することはできないため、ここでは axios を使用します。応答インターセプターでは、均一に処理されます。リクエストが成功した後、すべての応答データを取得し、特別なデータを処理して、残りを通常どおり配布します。

関数の実装

問題を分析したら、関数を実装しましょう

axiosのインストール方法を説明します

main.jsにaxiosを登録します

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

注: qs、axios を使用するには、qs をインストールする必要があります。すべての Post リクエストに対して、パラメーターをシリアル化するために qs が必要です。

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

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 2500
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

レスポンスインターセプターで実装

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

以上、皆さんの参考になれば幸いです。

関連記事:

vueでラベルクリックハイライトメソッドを実装

Vue - ルーティングナビゲーションメニューバーのハイライト設定メソッド

Vueで双方向バインディングを実装する4つのメソッド

以上がVue ネットワークでインターセプターをリクエストするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。