时间戳

首页 > 解决方案 > 使用 Angular 关闭浏览器窗口/选项卡时执行异步服务获取

angular - 使用 Angular 关闭浏览器窗口/选项卡时执行异步服务获取

问题描述

我目前正在尝试让 Angular 应用程序在用户尝试离开我的页面时进行 API 服务调用。通过关闭选项卡/窗口，或输入外部 URL。

我已经尝试实现我在这里看到的关于 stackoverflow 问题的几种不同方式，但似乎都没有达到预期的效果。有些人提到同步 ajax 请求在 Chrome 上的 onbeforeunload 中已经或正在被弃用。其他人建议使用 XMLHttpRequests，这似乎遭遇了同样的命运。我曾尝试 @HostListener('window:onbeforeunload', ['$event'])在 HTML 中使用 , 和等价物(window:beforeunload)="doBeforeUnload($event)"，但都拒绝合作。我可以让 console.logs 显示出来，但 API 从未收到任何注销用户的调用。我也使用过navigator.sendBeacon，尽管它的函数返回 true，表示作业已发送到浏览器队列，但没有任何实现。

目前，注销功能是这样的：

userLogout(): Observable<any> {
    return this.apiService.get('/Account/Logout/');
  }

反过来，它是一个通用的 http get 函数：

get<T>(url: string, options?: { params: HttpParams }): Observable<any> {
    return this.httpRequest<T>('get', url, null, options ? options.params : null);
  }

使用 HttpInterceptor 添加完整的 url。注销功能本身正在工作，因为它在手动使用时按预期工作的菜单选项中使用。所以功能应该不是问题。

我要做的就是以同步或异步方式调用 userLogout 函数，并通知后端用户已经离开。

标签： angularonbeforeunloadonunloadsendbeacon

解决方案

经过一番修修补补，我最终得到了一个基于这个答案的解决方案，尽管由于某种原因，它在我的第一次尝试中对我不起作用。

我在组件中添加了以下 HostBinding：

@HostListener('window:beforeunload', ['$event']) beforeunloadHandler(event) {
    this.pageClosed();
}

它调用了一个简单的函数，该函数将使用身份验证服务注销方法。

pageClosed() {
    this.authenticationService.userLogoutSync();
}

我必须创建一个单独的注销功能，以便它可以同步。还必须为后端授权添加标头，因为我的 Http 拦截器无法捕获 XMLHttpRequest 并自行添加它们。

const xhr = new XMLHttpRequest();
    xhr.open('GET', environment.backend + '/Account/Logout/', false);
    xhr.setRequestHeader('Authorization', 'Bearer ' + this.jwtService.getAccessToken());
    xhr.send();
}

推荐阅读