在 Angular 中关闭 window 时注销 4

Question

我有一个 Angular 4 应用程序，我想在用户关闭页面（window 或浏览器的选项卡）时调用注销功能。

这是我的注销功能：

    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 中，我有：

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

}

但是 window 已关闭，请求从未完成。我想我需要同步做请求，但我不知道怎么做。

你有什么想法吗？

编辑我试过 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 });
}

Answer 1

您可以将您的用户和凭据存储在 sessionStorage 而不是 localStorage 中。 sessionStorage 会在您关闭 tab/browser 时被删除，localStorage 不要！

Answer 2

为什么要在用户离开时断开连接取决于您。但如果你想这样做，你必须调整你的代码和逻辑以适应框架，而不是相反。

这意味着您必须在用户再次登录时重写用户会话，或者有删除未使用会话的作业。

但是在这两种方式中，您所要做的就是删除您的 localStorage/SessionStorage。如果你这样做，这对用户来说是透明的，只是你在服务器上管理它的方式会改变（但用户不知道）

Answer 3

您可以做的是，对这部分使用 jQuery 使 API 调用同步，并根据需要使其同步。这很容易，而且做得很好。

Answer 4

您可以将任何必须执行的代码添加到 app.component.ts

中的 OnDestroy 函数

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

不过我不确定这将如何处理异步调用。但值得一试。

Answer 5

我找到了方法。所以，我宁愿避免使用 jQuery 和 Angular，但像 Sriram Jayaraman 一样，我没有找到任何其他方法来解决我的问题。但是函数 @HostListener('window:beforeunload') 和 @HostListener('window:onunload') 不起作用。

因此，在我的 app.component.ts 的 ngOnInit 中，我为 beforeunload 添加了一个事件侦听器到 window，如果用户已连接，我将调用一个函数来创建一个 ajax呼唤。

这是我的代码：

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 中关闭 window 时注销 4

Logout when closing window in Angular 4

angular

http

synchronous