拦截器如何终止处理 Angular 4？答案

【问题标题】：How interceptor terminate handle Angular 4?拦截器如何终止处理 Angular 4？
【发布时间】：2020-05-03 20:10:52
【问题描述】：

我有一个 Ionic 3 应用程序项目，当应用程序接收到来自服务器的响应时，我添加了一个拦截器，当响应的状态等于 401 时，应用程序跳转到登录页面，我使用 app.getRootNav().setRoot(LoginPage)。但是，当带有toast的页面收到401响应时，toast还是会出现，这是出乎意料的

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.rest = this.inj.get(RestProvider);
    return next.handle(req).do(
        res => {
        ...
        },
        err => {
            if (err instanceof HttpErrorResponse) {
                if (err.status == 401) {
                    this.app.getRootNav().setRoot(LoginPage);
                    super.showToast(this.toastCtrl, "sorry, due to authorization, you must login again")
                    return;
                } else {
                    throw err;
                }
            }
        })
}

然后当我的 HTTP 请求是这样的：

this.http.post(this.baseUrl + "/recvUsername",param)
.subscribe(
    res => {
      this.initRecvUsernames(res["data"]);
    },
    err => {
      console.error("get receive user error:" + err.message);
      super.showToast(this.toast, "get receive user error");
    }
)

那么当我跳转到登录页面时，请求页面会显示吐司，如何终止请求页面的吐司？

【问题讨论】：

标签： angular ionic3 interceptor

【解决方案1】：

您可以在 http 参数中传递一个标志并在拦截器中将其删除

const params = req.params;
const isPreventToast = params.has('preventToast');
params.delete('preventToast')
const newReq = req.clone({ params });
return next.handle(newReq).do(..., err => { if(!isPreventToast) ... })

【讨论】：

感谢您的回答，但我的意思是意外的 toast 是请求页面中的“收到用户错误..”，如果收到 401 错误，拦截器中的 toast 将显示，请求中的 toast页面不显示是完美的。我为我可怜的英语感到抱歉。