web-dev-qa-db-fra.com

Se déconnecter lors de la fermeture de la fenêtre dans Angular 4

J'ai une Angular 4 et je souhaite appeler la fonction de déconnexion lorsque l'utilisateur ferme la page (fenêtre ou onglet du navigateur).

Voici ma fonction de déconnexion:

    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));

    let headers = new Headers({ 'Authorization': 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password),
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization'
    });

    let opts = new RequestOptions();
    opts.headers = headers;


   return this.http.get(this.route + 'UserLogout', opts).map((response: Response) => response.json());
}

Et dans mon app.component.ts, j'ai:

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    this.authenticationService.logoutOnClose().subscribe(res=> {
        localStorage.removeItem('currentUser');
    });

}

Mais la fenêtre est fermée et la demande n'est jamais faite. Je pense que je dois faire la demande de manière synchrone mais je ne sais pas comment le faire.

Avez-vous une idée ?

MODIFIER J'ai essayé avec jQuery:

 ngOnDestroy(){
    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));
    $.ajax({ url: 'myURL',
        beforeSend: function(request) {
            request.setRequestHeader("Authority", 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password));
            request.setRequestHeader('Content-Type', 'application/json');
            request.setRequestHeader('Access-Control-Allow-Origin', '*');
            request.setRequestHeader('Access-Control-Allow-Headers', 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization');
        },
        type: 'GET',
        success: function (result) {
        alert('test');
        localStorage.removeItem('currentUser');
    }, async: false });
}
angularhttpsynchronous
6
Adrien

J'ai trouvé comment le faire. Donc, je préférerais éviter jQuery avec Angular mais comme Sriram Jayaraman je n'ai rien trouvé d'autre pour résoudre mon problème. Mais les fonctions @HostListener('window:beforeunload') et @HostListener('window:onunload') ne fonctionne pas.

Ainsi, dans le ngOnInit de mon app.component.ts, j'ai ajouté un écouteur d'événements pour beforeunload à la fenêtre et si l'utilisateur est connecté j'appelle une fonction qui fait un appel ajax.

Voici mon code:

ngOnInit() {
    let context = this;
    window.addEventListener("beforeunload", function (e) {
        let currentUser : User = JSON.parse(localStorage.getItem('currentUser'));
        if(currentUser){
            context.logoutOnClose();
        }
    });
}

logoutOnClose(){
    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));
    $.ajax({ url: 'myURL',
    beforeSend: function(request) {
        request.setRequestHeader("Authorization", 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password));
        request.setRequestHeader('Content-Type', 'application/json');
        request.setRequestHeader('Access-Control-Allow-Origin', '*');
        request.setRequestHeader('Access-Control-Allow-Headers', 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization');
    },
    type: 'GET',
        success: function (result) {
        localStorage.removeItem('currentUser');
    },
    async: false });
}
8
Adrien

Vous pouvez stocker votre utilisateur et vos informations d'identification dans sessionStorage plutôt que localStorage. sessionStorage est supprimé à chaque fermeture de l'onglet/du navigateur, localStorage pas!

3
Boulboulouboule

Pourquoi voudriez-vous déconnecter votre utilisateur en partant est à vous. Mais si vous voulez le faire, vous devez adapter votre code et votre logique au framework, et non l'inverse.

Cela signifie que vous devez réécrire la session utilisateur lorsque l'utilisateur se reconnecte ou avoir un travail qui supprime les sessions inutilisées.

Mais dans les deux sens, tout ce que vous avez à faire est de supprimer votre localStorage/SessionStorage. Si vous faites cela, cela sera transparent pour l'utilisateur, c'est juste la façon dont vous le gérez sur votre serveur qui va changer (mais l'utilisateur n'aura aucune idée)

0
user4676340

Vous pouvez ajouter tout code à exécuter à la fonction OnDestroy dans votre app.component.ts

export class AppComponent implements OnDestroy {
    ngOnDestroy(): void {
        this.authenticationService.logoutOnClose().subscribe(res=> {
            localStorage.removeItem('currentUser');
    });
}

Cependant, je ne sais pas comment cela va gérer l'appel asynchrone .. mais cela vaut la peine d'essayer.

0
Venomy