Comment résoudre le problème du code d'état 302 dans axios-js tutoriel-php.cn

Comment résoudre le problème du code d'état 302 dans axios

php中世界最好的语言

Libérer： 2018-05-25 14:15:44

original

4433 Les gens l'ont consulté

Cette fois je vais vous montrer comment axios résout le problème du code d'état 302 Quelles sont les précautions pour qu'axios résolve le problème du code d'état 302. Voici les cas pratiques. 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 : parcourez la requête Ajax envoyée par le serveur, 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 que l'url soit obtenue après l'obtention de l'url. redirections du navigateur. 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';

Copier après la connexion

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

Copier après la connexion

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 :

Explication détaillée des étapes à suivre pour utiliser le composant intégré select de Vue

Éviter le nouveau rendu lors de l'utilisation de React

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!