Umgang mit dem Statuscode 302 in Axios

Dieses Mal zeige ich Ihnen, wie Sie mit dem 302-Statuscode in Axios umgehen. Was sind die Vorsichtsmaßnahmen beim Umgang mit dem 302-Statuscode in Axios? Werfen wir einen Blick darauf.

Wenn der Browser beispielsweise eine Single-Page-Anwendung (SPA) öffnet und das Token (oder die Sitzung) nach einer Weile abläuft, nachdem eine Ajax-Anfrage auf der Seite initiiert wurde, gibt das Backend einen 302-Statuscode zurück und springt zur Anmeldeseite. Ich verwende Vue + Axios und habe festgestellt, dass Axios die 302-Anfrage nicht abfangen kann. Das Folgende ist der Verarbeitungsprozess.

Denken

Google Axios 302 Handle Siehe zwei Diskussionen auf Axios Github

•

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

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

Die Schlussfolgerung lautet: Durchsuchen Sie die Ajax-Anfrage, die von gesendet wurde Der Server gibt einen 302-Statuscode zurück und der Browser springt von selbst. Wir können den Verarbeitungsprozess nicht direkt über die js-Bibliothek (jquery, axios) abrufen und anpassen entsprechende Browser-Weiterleitungen.

Axios sendet Ajax -->

Server gibt 302 und Standort zurück --> >

axios Ergebnisse erzielen

Wie kann man das Problem lösen? Der Server muss kooperieren, um das Problem zu lösen

Brower (Ajax und nicht authentifiziert) --> Der Server stellt fest, dass es sich um eine Ajax-Anfrage handelt und ist nicht angemeldet, und gibt a zurück 401-Statuscode -->

Browser axios fängt 401 ab und springt über js zu /login

, um das Problem zu lösen

Axios fügt auf der Browserseite einen Interceptor hinzu

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

Back-End-Code, verwenden Sie das Flask-Framework, schauen Sie sich einfach den Prozess an, überprüfen Sie, ob die Anfrage Ajax ist und nicht angemeldet ist, und geben Sie dann 401 zurück Statuscode

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was sind die Verwendungsmöglichkeiten von $emit in Vue?

Seitensprung ohne Verwendung von Router-Link

Das obige ist der detaillierte Inhalt vonUmgang mit dem Statuscode 302 in Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!