Code d'état 302 dans axios

Cette fois, je vais vous apporter le code d'état 302 dans axios. Quelles sont les précautions à prendre pour utiliser le code d'état 302 dans axios ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Par exemple, si le navigateur ouvre une application à page unique (SPA) et que le jeton (ou la session) expire après un certain temps, après qu'une requête Ajax soit lancée sur la page, le backend renvoie un code d'état 302 et passe à la page de connexion. J'utilise Vue + axios et j'ai constaté qu'axios ne peut pas intercepter la requête 302. Voici le processus de traitement.

Penser

poignée Google Axios 302 Voir deux discussions sur axios github

• https://github .com/ axios/axios/issues/932

• https://github.com/axios/axios/issues/980

La conclusion est : la requête ajax envoyée par le navigateur, Le serveur renvoie un code d'état 302, et le navigateur sautera tout seul. Nous ne pouvons pas obtenir et personnaliser directement le processus de traitement via la bibliothèque js (jquery, axios). Nous ne pouvons qu'attendre l'URL après la redirection du navigateur pour obtenir les informations correspondantes.

axios envoie ajax -->
le serveur renvoie 302 et l'emplacement -->
Le navigateur demande une nouvelle URL
Le serveur renvoie 200 -- >

axios Obtenez des résultats

Alors comment le résoudre ? Le serveur doit coopérer pour résoudre le problème

Brower (ajax et non auth) -->
Le serveur détermine qu'il s'agit d'une requête ajax et n'est pas connecté, et renvoie un Code d'état 401 --->
Le navigateur axios intercepte 401 et accède à /login via js

pour résoudre le problème

côté navigateur, axios ajoute un intercepteur

axios.interceptors.response.use((response) => {
  return response;
}, function (error) {
  if (401 === error.response.status) {
    window.location = '/login';
  } else {
    return Promise.reject(error);
  }
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Code back-end, en utilisant le framework flask, il suffit de regarder le processus, de vérifier si la requête est ajax et non connectée, puis de revenir le code d'état 401

from flask import Blueprint, request, jsonify, make_response, abort
from flask_login.utils import current_user, current_app
apibp = Blueprint('api', 'api_bp')
# 主要逻辑
def bp_login_required():
  if not current_user.is_authenticated:
    if request.is_xhr:
      abort(401)
    else:
      return current_app.login_manager.unauthorized()
apibp.before_request(bp_login_required)
@apibp.route("/report/domains/<month>/", methods=["GET"])
def monthly_domains(month):
  return jsonify({})
ref

Je crois que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Comment utiliser vue pour demander du json local

Opération JS Déduplication de tableau JSON

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!