Comment demander des intercepteurs dans le réseau Vue ?

Cet article présente principalement l'application pratique des intercepteurs dans les requêtes réseau Vue. Maintenant, je le partage avec vous et vous donne une référence.

Contexte du projet

Récemment, lors du développement du projet, j'ai rencontré le problème suivant :

1. En cours avant Minggan fonctionne, chaque demande doit comporter un jeton, mais le jeton a une période de validité. Après l'expiration du jeton, vous devez l'échanger contre un nouveau jeton et poursuivre la demande.

Analyse des exigences

1. Chaque requête doit porter un jeton, nous pouvons donc utiliser l'intercepteur de requête axios Ici, nous donnons à chaque ajout de jetons. à toutes les demandes, afin que vous puissiez enregistrer le code copier-coller encore et encore pour chaque demande.

2. Problème d'invalidation du jeton. Lorsque notre jeton expire, notre serveur renvoie une indication d'erreur spécifique, telle qu'un jeton invalide, mais nous ne pouvons pas actualiser le jeton après chaque demande. utilisez l'intercepteur de réponse axios. Nous traitons uniformément toutes les données de réponse une fois la demande réussie, puis traitons les données spéciales et distribuons le reste normalement.

Implémentation de la fonction

Après avoir analysé le problème, implémentons la fonction

Installer axios, ici nous allons Décrivez comment installer axios.

Enregistrez axios dans main.js

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

Remarque : qs, utilisez axios , qs doit être installé pour toutes les requêtes Post, nous avons besoin de qs pour sérialiser les paramètres.

Implémenté dans l'intercepteur de requêtes

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)
 }
)

Implémenté dans l'intercepteur de réponses

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)
 }
)

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Vue implémente une méthode de mise en surbrillance des clics d'étiquettes

Mise en évidence de la barre de menu de navigation Vue-routing Méthode de paramétrage

Quatre façons d'implémenter la liaison bidirectionnelle dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!