401响应的角度闭合模态

问题描述

如果服务器的响应状态为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模态。

或者如果令牌无效，阻止用户打开模式是个好习惯吗？如果是这样，我有很多模态，该如何从一个中心位置进行验证

解决方法

您可以利用方法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全局处理响应可能是个好主意。

考虑这是一个好习惯。认证后恢复应用程序状态（表单字段中的值，当前打开的模式，手风琴状态等）将是一个很好的用户体验。使用重定向很难。带有身份验证形式的模式可能更易于实现。

这在很大程度上取决于您的应用思维。