时间戳

首页 > 解决方案 > 带有消息的Angular 8拦截重定向

angular - 带有消息的Angular 8拦截重定向

问题描述

下面的代码显示了一个拦截器。当状态码为 401 时，我想将用户重定向到登录屏幕并显示消息“密码或用户名无效”。我怎样才能做到这一点？

因为如果我将用户路由到登录屏幕，是否会调用“return throwError”？而且，有没有办法测试这个？

拦截器：

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError(err => {

            let errorMessage = '';

            if(err instanceof HttpErrorResponse) { // server side error

                switch (err.status) {
                    case 401:      //login
                        errorMessage = `Username or password not found`;
                        this.authenticationService.logout(); // removes session data (if there are any)
                        this.router.navigate(['/login']);
                        break;          
            }
            return throwError(errorMessage);
        }
    }
  ))
}

登录服务方法：

  login(username: string, password: string): Observable<any> {
return this.http.post<User>(`https://test/login`, { username, password })
    .pipe(
      map(user => {
        // store user details and jwt token in local storage to keep user logged in between page refreshes
        localStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        this.toast.success(user.username + ' logged in');
        return user;
    }));

}

组件登录方法：

    this.authenticationService.login(username, password)
.pipe(first())
.subscribe(
      data => {
          this.router.navigate([this.returnUrl]);
      },
      error => {
        console.error("blabla" + error);
      }
    );
}

标签： angularhttpauthenticationinterceptor

解决方案

return 语句可能会运行。这取决于代码是否到达它。

我建议你用一个setTimeout()函数包围整个开关，以确保最终用户在重定向之前会看到你的消息。这也将确保您不会在重定向之前调用 return 语句。

就像是：

setTimeout(() => {
                    switch (err.status) {
                    case 401:      //login
                        errorMessage = `Username or password not found`;
                        this.authenticationService.logout(); // removes session data (if there are any)
                        this.router.navigate(['/login']);
                        break;          
                    }
                }, 3000);

3000 - 这是代码继续之前的时间（以毫秒为单位）。

推荐阅读