401响应的角度闭合模态

Question

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

或者，如果令牌无效，阻止用户打开modal是一种好的做法吗？如果是这样，我如何从中心位置验证它，因为我有很多模式

Answer 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拦截器全局处理响应可能是个好主意。

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

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