在Angular 4中关闭窗口时注销 [英] Logout when closing window in Angular 4

问题描述

我有一个Angular 4应用程序，我想在用户关闭页面(浏览器的窗口或选项卡)时调用注销功能.

I have an Angular 4 applicaton and I want to call the logout function when the user close the page (window or tab of the browser).

这是我的注销功能:

    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());
}

在我的app.component.ts中，我有:

And in my app.component.ts, I have :

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

}

但是窗口已关闭，请求从未完成.我想我需要同步执行请求，但我不知道该怎么办.

But the window is close and the request is never done. I think I need to do the request synchronously but I don't know how to do it.

你有个主意吗?

编辑 我尝试使用jQuery:

EDIT I tried with 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 });
}

推荐答案

我找到了解决方法.因此，我希望避免使用Angular jQuery，但像Sriram Jayaraman一样，我没有找到其他解决问题的方法.但是功能@HostListener('window:beforeunload')和@HostListener('window:onunload')无法正常工作.

I found how to do it. So, I would prefer avoid jQuery with Angular but like Sriram Jayaraman I didn't find anything else to fix my problem. But the functions @HostListener('window:beforeunload') and @HostListener('window:onunload') are not working.

因此，在app.component.ts的ngOnInit中，我向窗口添加了beforeunload的事件侦听器，如果用户已连接，我将调用一个进行ajax调用的函数.

So, in the ngOnInit of my app.component.ts, I added an event listener for beforeunload to the window and if the user is connected I call a function which make an ajax call.

这是我的代码:

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 });
}

这篇关于在Angular 4中关闭窗口时注销的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！