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

Question

J'utilise $.post() pour appeler une servlet à l'aide d'Ajax, puis en utilisant le fragment HTML résultant pour remplacer un fichier de type div dans la page actuelle de l'utilisateur. Toutefois, si la session expire, le serveur envoie une directive de redirection pour renvoyer l'utilisateur vers la page de connexion. Dans ce cas, jQuery remplace l'élément div avec le contenu de la page de connexion, obligeant les yeux de l'utilisateur à assister à une scène rare.

Comment gérer une directive de redirection à partir d'un appel Ajax avec jQuery 1.2.6 ?

Answer 1

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

Answer 2

Essayez

    $(document).ready(function () {
        if ($("#site").length > 0) {
            window.location = "<%= Url.Content("~") %>" + "Login/LogOn";
        }
    });

Mettez-le sur la page de connexion. S'il a été chargé dans un div sur la page principale, il sera redirigé vers la page de connexion. "#site" est l'identifiant d'un div qui est situé sur toutes les pages sauf la page de connexion.

Answer 3

Bien que les réponses semblent fonctionner pour les personnes qui utilisent Spring Security, j'ai trouvé que l'extension de LoginUrlAuthenticationEntryPoint et l'ajout de code spécifique pour gérer AJAX étaient plus robustes. La plupart des exemples interceptent tous les redirections et pas seulement les échecs d'authentification. Cela n'était pas souhaitable pour le projet sur lequel je travaille. Vous aurez peut-être besoin d'étendre ExceptionTranslationFilter et de surcharger la méthode "sendStartAuthentication" pour supprimer l'étape de mise en cache si vous ne voulez pas que la requête AJAX échouée soit mise 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 : 1 , 2

Answer 4

J'ai résolu ce problème en ajoutant le texte suivant dans ma page login.php.

<script type="text/javascript">
    if (top.location.href.indexOf('login.php') == -1) {
        top.location.href = '/login.php';
    }
</script>

Answer 5

Permettez-moi de citer à nouveau le problème tel que décrit par @Steg

J'ai eu un problème similaire au vôtre. J'effectue une requête ajax qui a 2 réponses possibles : une qui redirige le navigateur vers une nouvelle page et une qui une qui remplace un formulaire HTML existant sur la page actuelle par un nouveau formulaire. nouveau formulaire.

À mon avis, il s'agit d'un véritable défi qui devra être officiellement étendu aux normes HTTP actuelles.

Je pense que la nouvelle norme Http sera d'utiliser un nouveau code de statut. signification : actuellement 301/302 indique au navigateur qu'il doit aller chercher le contenu du fichier ce à une nouvelle location .

Dans la norme étendue, il sera dit que si la réponse status: 308 (juste un exemple), alors le navigateur devrait rediriger la page principale vers la page location fourni.

Ceci étant dit, je suis enclin à déjà imiter ceci futur et donc, lorsqu'un document.redirect est nécessaire, je demande au serveur de répondre comme :

status: 204 No Content
x-status: 308 Document Redirect
x-location: /login.html

Quand JS reçoit le " status: 204 ", il vérifie l'existence de l'élément x-status: 308 et fait un document.redirect vers la page fournie dans l'en-tête location en-tête.

Est-ce que cela a un sens pour vous ?