Maison > interface Web > js tutoriel > le corps du texte

Code d'état 302 dans axios

php中世界最好的语言
Libérer: 2018-06-08 17:30:47
original
2873 Les gens l'ont consulté

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';
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 :

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!