302 Statuscode in Axios

Dieses Mal bringe ich Ihnen den 302-Statuscode in Axios. Was sind die Vorsichtsmaßnahmen für die Verwendung des 302-Statuscodes in Axios? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 ist: Die vom Browser gesendete Ajax-Anfrage wird vom Server zurückgegeben Ein 302-Statuscode, und der Browser springt von selbst. Wir können den Verarbeitungsprozess nicht direkt über die js-Bibliothek (jquery, axios) abrufen und anpassen, um die entsprechenden Informationen abzurufen.

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:

So verwenden Sie Vue, um lokales JSON anzufordern

JS-Betrieb JSON-Array-Deduplizierung

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