401响应的角度关闭模式答案

【问题标题】：Angular close modals for 401 response401响应的角度关闭模式
【发布时间】：2020-12-06 16:02:36
【问题描述】：

如果来自服务器的响应状态为 401 或 403，我将使用以下代码将用户重定向到登录页面。

return this.http
        .request(this.method, this.prepareUrl(url), options)
        .pipe(
            catchError((error: HttpErrorResponse) => {
                if ([401, 403].includes(error.status)) {
                   this.router.navigate(['/login']);
                }
                const err: Errors = {
                    error: error,
                    formError: error.error.data.validation ? error.error.data.validation : null
                };

                return Observable.throw(err);
            })
        );

这工作正常。但是当与模式弹出窗口一起使用时，如果令牌已过期，它会显示导航到登录页面，但模式仍然存在。如果响应状态为 401，我该如何防止这种情况并关闭模式？我正在使用 ngBootstrap 模式。

或者，如果令牌无效，阻止用户打开模式是否是一种好习惯？如果是这样，我如何从中心位置验证它，因为我有许多模式

【问题讨论】：

标签： angular jwt modal-dialog ng-bootstrap

【解决方案1】：

您可以利用方法NgbModal.dismissAll(reason)

export MyComponent {
   constructor(protected ngbModal:NgbModal){}

   public myMethod() {
      return this.http
        .request(this.method, this.prepareUrl(url), options)
        .pipe(
            catchError((error: HttpErrorResponse) => {
                if ([401, 403].includes(error.status)) {
                   this.ngbModal.dismissAll('Unauthorized');
                   this.router.navigate(['/login']);
                }
                const err: Errors = {
                    error: error,
                    formError: error.error.data.validation ? error.error.data.validation : null
                };

                return Observable.throw(err);
            })
        );
   }
}

使用Http interceptor 来处理全局响应可能是个好主意。

考虑到这是一个好习惯。在身份验证后恢复应用程序状态（表单字段中的值、当前打开的模式、手风琴状态等）将是一个很好的用户体验。使用重定向非常困难。带有身份验证表单的模态可能是一个更容易实现的解决方案。

这在很大程度上取决于您对应用程序的想法。

【讨论】：