Comment gérer une demande de redirection après un appel Ajax jQuery

J'ai lu cette question et mis en œuvre l'approche qui a été dit concernant le réglage du code d'état de réponse à 278 afin d'éviter le navigateur de façon transparente de la manipulation de la redirection. Même si cela a fonctionné, j'ai été un peu mécontent que c'est un peu un hack.

Après plus de creuser autour, j'ai abandonné cette approche et JSON. Dans ce cas, toutes les réponses aux requêtes ajax avoir le code d'état 200 et le corps de la réponse contient un objet JSON qui est construit sur le serveur. Le javascript sur le client peut alors utiliser l'objet JSON de décider ce qu'il doit faire.

J'ai eu un problème similaire au vôtre. J'ai effectuer une requête ajax qui a 2 réponses possibles: l'une qui redirige le navigateur vers une nouvelle page, et celui qui remplace un formulaire HTML sur la page en cours avec un nouveau. Le jquery, le code pour faire cela ressemble à quelque chose comme:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            //data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            //data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

L'objet JSON "données" est construit sur le serveur pour avoir 2 membres: les données.redirection et de données.forme. J'ai trouvé cette approche à être beaucoup mieux.

Pas les navigateurs poignée 301 et 302 réponses correctement. Et, en fait, la norme dit même qu'ils doivent les gérer de façon "transparente" qui est un ÉNORME casse-tête pour la Bibliothèque Ajax fournisseurs. Dans Ra-Ajax nous avons été obligés d'utiliser de statut de la réponse HTTP du code 278 (juste quelques "inutilisé" code de réussite) pour gérer de manière transparente les redirections à partir du serveur...

Cela me gêne vraiment, et si quelqu'un ici en "pull" dans le W3C j'apprécierais que vous pourriez laisser W3C savoir que nous avons vraiment besoin de gérer 301 et 302 codes de nous-mêmes...! 😉

J'aime Timmerz de la méthode avec une légère torsion de citron. Si jamais vous avez retourné contentType de texte/html lorsque vous êtes enceinte JSON, vous êtes plus susceptibles d'être redirigé. Dans mon cas, je viens de recharger la page, et il obtient redirigé vers la page de connexion. Oh, et vérifier que le jqXHR statut est de 200, ce qui semble idiot, parce que vous êtes dans la fonction d'erreur, non? Sinon, légitime en cas d'erreur va forcer un processus itératif de rechargement (oups)

$.ajax(
   error:  function (jqXHR, timeout, message) {
    var contentType = jqXHR.getResponseHeader("Content-Type");
    if (jqXHR.status === 200 && contentType.toLowerCase().indexOf("text/html") >= 0) {
        //assume that our login has expired - reload our current page
        window.location.reload();
    }

});

Je voulais juste partager mon approche, car cela pourrait cela pourrait aider quelqu'un:

En gros, j'ai inclus un module JavaScript qui s'occupe de l'authentification des trucs comme l'affichage du nom d'utilisateur et aussi ce cas de la manipulation de la rediriger vers la page de connexion.

Mon scénario: Nous avons un serveur ISA dans entre qui est à l'écoute de toutes les demandes et répond avec un 302 et un en-tête location sur notre page de connexion.

Dans mon JavaScript module de mes approche initiale était quelque chose comme

$(document).ajaxComplete(function(e, xhr, settings){
    if(xhr.status === 302){
        //check for location header and redirect...
    }
});

Le problème (comme beaucoup ici déjà mentionné plus haut), c'est que le navigateur gère la redirection par lui-même c'est pourquoi mon ajaxComplete rappel ai jamais appelé, mais à la place j'ai eu le réponse de la déjà redirigé page de Connexion qui était à l'évidence un status 200. Le problème: comment détecter si le succès de 200 de réponse est de votre page de connexion ou les quelques autres arbitraire page??

La solution

Puisque je n'étais pas en mesure de capturer de redirection 302 réponses, j'ai ajouté un LoginPage en-tête sur ma page de connexion qui contenait l'url de la page de connexion elle-même. Dans le module, j'ai maintenant l'écouter pour l'en-tête et de faire une redirection:

if(xhr.status === 200){
    var loginPageRedirectHeader = xhr.getResponseHeader("LoginPage");
    if(loginPageRedirectHeader && loginPageRedirectHeader !== ""){
        window.location.replace(loginPageRedirectHeader);
    }
}

...et qui fonctionne comme un charme :). Vous pourriez vous demander pourquoi je inclure l'url dans la LoginPage - tête...eh bien en fait, car je n'ai trouvé aucun moyen de déterminer l'url de GET résultant de la localisation automatique de redirection à partir de l' xhr objet...

Je pense qu'une meilleure façon de gérer cela est de tirer parti de l'existant protocole HTTP codes de réponse, plus précisément 401 Unauthorized.

Voici comment je l'ai résolu:

1. Côté serveur: Si la session expire, et la demande est ajax. envoyer une réponse 401 du code de l'en-tête

2. Côté Client: se Lier à l'ajax événements

   $('body').bind('ajaxSuccess',function(event,request,settings){
   if (401 == request.status){
       window.location = '/users/login';
   }
   }).bind('ajaxError',function(event,request,settings){
   if (401 == request.status){
       window.location = '/users/login';
   }
   });

IMO c'est plus générique et que vous n'êtes pas à écrire quelques nouvelles spécifications personnalisées/en-tête. Vous aussi vous ne devriez pas avoir à modifier un de vos appels ajax.

Edit: Par @Rob commentaire ci-dessous, 401 (le code de statut HTTP pour les erreurs d'authentification) devrait être l'indicateur. Voir 403 Forbidden vs 401 non autorisé des réponses HTTP pour plus de détails. Cela étant dit, certains frameworks web utiliser 403 pour l'authentification ET de l'autorisation d'erreurs - donc s'adapter en conséquence. Merci Rob.

La plupart des solutions proposées comme l'utilisation d'une solution de contournement, à l'aide d'un en-tête supplémentaire ou un inappropiate code HTTP. Ces solutions, plus probablement, des travaux mais se sentir un peu "hacky'. J'ai trouvé une autre solution.

Nous utilisons WIF qui est configuré pour rediriger (passiveRedirectEnabled="true") sur une réponse 401. La redirection est utile lors de la manipulation normale de la demande, mais ne fonctionnera pas pour les requêtes AJAX (depuis les navigateurs ne pas exécuter l'302/redirect).

En utilisant le code suivant dans votre global.asax vous pouvez désactiver la redirection de requêtes AJAX:

    void WSFederationAuthenticationModule_AuthorizationFailed(object sender, AuthorizationFailedEventArgs e)
    {
        string requestedWithHeader = HttpContext.Current.Request.Headers["X-Requested-With"];

        if (!string.IsNullOrEmpty(requestedWithHeader) && requestedWithHeader.Equals("XMLHttpRequest", StringComparison.OrdinalIgnoreCase))
        {
            e.RedirectToIdentityProvider = false;
        }
    }

Cela vous permet de retourner les réponses 401 pour les requêtes AJAX, qui javascript de votre pouvez alors gérer par le rechargement de la page. Le rechargement de la page de jeter un 401, qui seront traitées par WIF (et WIF redirige l'utilisateur vers la page de connexion).

Un exemple javascript pour gérer les erreurs 401:

$(document).ajaxError(function (event, jqxhr, settings, exception) {

    if (jqxhr.status == 401) { //Forbidden, go to login
        //Use a reload, WIF will redirect to Login
        location.reload(true);
    }
});

Ce problème peut apparaître puis à l'aide de ASP.NET MVC RedirectToAction méthode. Pour prévenir la forme de l'affichage de la réponse de la div, vous pouvez simplement faire une sorte d'ajax filtre à réponse pour incomming réponses avec $.ajaxSetup. Si la réponse contient MVC de redirection, vous pouvez évaluer cette expression sur JS côté. Exemple de code pour JS ci-dessous:

$.ajaxSetup({
    dataFilter: function (data, type) {
        if (data && typeof data == "string") {
            if (data.indexOf('window.location') > -1) {
                eval(data);
            }
        }
        return data;
    }
});

Si des données sont: "de la fenêtre.location = '/Account/Login'" ci-dessus, le filtre de capture et d'évaluer de faire de la redirection au lieu de laisser les données à afficher.

J'ai une solution simple qui fonctionne pour moi, pas de serveur de changement de code nécessaire...il suffit d'ajouter une cuillère à café de noix de muscade...

$(document).ready(function ()
{
    $(document).ajaxSend(
    function(event,request,settings)
    {
        var intercepted_success = settings.success;
        settings.success = function( a, b, c ) 
        {  
            if( request.responseText.indexOf( "<html>" ) > -1 )
                window.location = window.location;
            else
                intercepted_success( a, b, c );
        };
    });
});

- Je vérifier la présence de la balise html, mais vous pouvez changer la indexOf à la recherche de ce chaîne unique existe dans votre page de connexion...

    <script>
    function showValues() {
        var str = $("form").serialize();
        $.post('loginUser.html', 
        str,
        function(responseText, responseStatus, responseXML){
            if(responseStatus=="success"){
                window.location= "adminIndex.html";
            }
        });     
    }
</script>

Alors que les réponses semblent travailler pour les gens si vous êtes à l'aide de la Sécurité Printemps, j'ai trouvé l'extension de LoginUrlAuthenticationEntryPoint et l'ajout de code spécifique pour gérer AJAX plus robuste. La plupart des exemples d'intercepter tous redirige pas seulement des échecs d'authentification. Ce n'est pas souhaitable pour le projet que je travaille sur. Vous pouvez trouver le besoin de prolonger ExceptionTranslationFilter et remplacer le "sendStartAuthentication" méthode pour supprimer la mise en cache étape si vous ne voulez pas l'échec de la requête AJAX mis en cache.

Exemple AjaxAwareAuthenticationEntryPoint:

public class AjaxAwareAuthenticationEntryPoint extends
    LoginUrlAuthenticationEntryPoint {

    public AjaxAwareAuthenticationEntryPoint(String loginUrl) {
        super(loginUrl);
    }

    @Override
    public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {
        if (isAjax(request)) {
            response.sendError(HttpStatus.UNAUTHORIZED.value(), "Please re-authenticate yourself");
        } else {
        super.commence(request, response, authException);
        }
    }

    public static boolean isAjax(HttpServletRequest request) {
        return request != null && "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));
    }
}

Sources:
Un, Deux

Certains pourraient trouver ci-dessous l'utile:

Je voulais clients pour être redirigé vers la page de connexion de tout repos-action qui est envoyé en l'absence d'un jeton d'autorisation. Puisque l'ensemble de mon repos-les actions sont basé sur Ajax, j'ai besoin d'une bonne façon générique pour rediriger vers la page de connexion au lieu de la manipulation de l'Ajax succès fonction.

C'est ce que j'ai fait:

Sur toute requête Ajax mon serveur sera de retour Json 200 réponse "authentification" (si le client a besoin de s'authentifier).

Exemple Simple en Java (côté serveur):

@Secured
@Provider
@Priority(Priorities.AUTHENTICATION)
public class AuthenticationFilter implements ContainerRequestFilter {

    private final Logger m_logger = LoggerFactory.getLogger(AuthenticationFilter.class);

    public static final String COOKIE_NAME = "token_cookie"; 

    @Override
    public void filter(ContainerRequestContext context) throws IOException {        
        //Check if it has a cookie.
        try {
            Map<String, Cookie> cookies = context.getCookies();

            if (!cookies.containsKey(COOKIE_NAME)) {
                m_logger.debug("No cookie set - redirect to login page");
                throw new AuthenticationException();
            }
        }
        catch (AuthenticationException e) {
            context.abortWith(Response.ok("\"NEED TO AUTHENTICATE\"").type("json/application").build());
        }
    }
}

Dans mon Javascript j'ai ajouté le code suivant:

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    var originalSuccess = options.success;

    options.success = function(data) {
        if (data == "NEED TO AUTHENTICATE") {
            window.location.replace("/login.html");
        }
        else {
            originalSuccess(data);
        }
    };      
});

Et c'est à ce sujet.

Je voulais juste de s'accrocher à toutes les requêtes ajax pour l'ensemble de la page. @SuperG m'ont commencé. Voici ce que j'ai:

//redirect ajax requests that are redirected, not found (404), or forbidden (403.)
$('body').bind('ajaxComplete', function(event,request,settings){
        switch(request.status) {
            case 301: case 404: case 403:                    
                window.location.replace("http://mysite.tld/login");
                break;
        }
});

Je voulais contrôler spécifiquement certains codes de statut http de la base de ma décision. Toutefois, vous pouvez simplement lier à ajaxError d'obtenir autre chose que le succès (200 seulement peut-être?) Je pourrais avoir juste écrit:

$('body').bind('ajaxError', function(event,request,settings){
    window.location.replace("http://mysite.tld/login");
}

Je n'ai pas de succès avec l'en-tête de la solution - ils n'ont jamais été ramassé dans mon ajaxSuccess /ajaxComplete méthode. J'ai utilisé de la Steg, en réponse à la coutume de réponse, mais j'ai modifié la JS côté quelques. J'ai installé une méthode que j'appelle dans chaque fonction, donc je peux utiliser des $.get et $.post méthodes.

function handleAjaxResponse(data, callback) {
    //Try to convert and parse object
    try {
        if (jQuery.type(data) === "string") {
            data = jQuery.parseJSON(data);
        }
        if (data.error) {
            if (data.error == 'login') {
                window.location.reload();
                return;
            }
            else if (data.error.length > 0) {
                alert(data.error);
                return;
            }
        }
    }
    catch(ex) { }

    if (callback) {
        callback(data);
    }
}

Exemple dans l'utilisation...

function submitAjaxForm(form, url, action) {
    //Lock form
    form.find('.ajax-submit').hide();
    form.find('.loader').show();

    $.post(url, form.serialize(), function (d) {
        //Unlock form
        form.find('.ajax-submit').show();
        form.find('.loader').hide();

        handleAjaxResponse(d, function (data) {
            //... more code for if auth passes ...
        });
    });
    return false;
}

J'ai eu ce problème sur un django app je suis à bricoler (disclaimer: je suis bricolage pour apprendre, et je suis en aucun cas un expert). Ce que je voulais faire était d'utiliser jQuery ajax pour envoyer une demande de SUPPRESSION d'une ressource, de le supprimer sur le serveur de l'autre côté, puis envoyer une demande de redirection (en gros) la page d'accueil. Quand j'ai envoyé HttpResponseRedirect('/the-redirect/') à partir du script python, jQuery ajax méthode a été la réception de 200 au lieu de 302. Donc, ce que j'ai fait a été d'envoyer une réponse de 300 avec:

response = HttpResponse(status='300')
response['Location'] = '/the-redirect/' 
return  response

Puis j'ai envoyé/traité de la demande sur le client avec jQuery.ajax comme suit:

<button onclick="*the-jquery*">Delete</button>

where *the-jquery* =
$.ajax({ 
  type: 'DELETE', 
  url: '/resource-url/', 
  complete: function(jqxhr){ 
    window.location = jqxhr.getResponseHeader('Location'); 
  } 
});

Peut-être à l'aide de 300 n'est pas "de droite", mais au moins il a fonctionné comme je le voulais.

PS :c'était une énorme douleur à modifier sur la version mobile de la SORTE. Stupide FAI de mettre mes service de demande d'annulation par le droit quand j'ai eu terminé ma réponse!

En outre, vous voudrez probablement pour rediriger les utilisateurs de la donnée dans les en-têtes URL. Donc, finalement, il ressemble à ceci:

$.ajax({
    //.... other definition
    complete:function(xmlHttp){
        if(xmlHttp.status.toString()[0]=='3'){
        top.location.href = xmlHttp.getResponseHeader('Location');
    }
});

UPD: Opps. La même tâche, mais il ne fonctionne. Faire ce genre de choses. Je vais vous montrer la solution quand je vais le trouver.

cela a fonctionné pour moi:

success: function(data, textStatus, xhr) {

        console.log(xhr.status);
}

en cas de succès, ajax obtiendrez le même code d'état du navigateur obtient à partir du serveur et de l'exécuter.