Angular 8 Перехват переадресации с сообщением

Question

Код ниже показывает перехватчик. Когда код статуса 401, я хочу перенаправить пользователя на экран входа в систему и показать сообщение «Пароль или имя пользователя недействительны». Как мне этого добиться?

Потому что, если я направлю пользователя на экран входа в систему, будет ли когда-нибудь вызываться return returnError? А также, есть ли способ проверить это?

Перехватчик:

 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);
        }
    }
  ))
}

LoginServiceMethod:

  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;
    }));

}

ComponentLoginMethod:

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

Answer 1

Оператор возврата может выполняться. Это зависит от того, дошел ли код до него.

Я предлагаю вам окружить весь коммутатор функцией 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 - это время в мс перед продолжением кода.