Angular 6 Route Guard показывает белую страницу

Question

Я пытаюсь добавить Route Guard, который будет отправлять JWT в PHP API, который будет возвращать true или false в зависимости от того, аутентифицирован ли пользователь. Благодаря моему тестированию Route Guard работает до тех пор, пока не вызовет API. Если API возвращает false, защита работает как положено. Тем не менее, если API возвращает значение true, то сторож, похоже, хочет перенаправить пользователя, как если бы он вернул значение false, но вместо отображения домашнего экрана он просто отображает ничего.

auth.guard.ts

canActivate(): boolean {
    if (localStorage.getItem('portfolioJWT') === null) {
        this.router.navigate(['/']);
        return false;
    } else {
        const token = JSON.parse(localStorage.getItem('portfolioJWT'));

        this.authService.isAuth(token).subscribe(res => {
            console.log(res);
            if(!res) {
                this.router.navigate(['/']);
                console.log("NOT Authorized");
                return false;
            } else {
                console.log("Authorized");
                return true;
            }
        });
    }
}

auth.service.ts

isAuth(token: string): Observable<Boolean> {

  const authHttpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'Bearer ' + token
      })
  };

  return this.http.post<Boolean>('http://portfolioapi/api/checkAuth', {}, authHttpOptions);
}

У меня есть консоль охраны, которая регистрирует возвращенное значение, и авторизован ли пользователь, что он делает, и показывает правильные данные.

Answer 1

Проблема может быть в том, что вы не используете Promise<boolean> для canActivate, поэтому, пока canActivate все еще выполняется в фоновом режиме, маршрутизатор уже перешел, что вызывает неожиданное поведение.

Примером может быть то, что API возвращает false и инициализирует navigate, но только после того, как маршрутизатор уже направил вас куда-то (это может вызвать пустую страницу). То же самое касается console.log(res), Это может работать, но уже слишком поздно, роутер перешел.

Чего вы хотите добиться, так это того, что маршрутизация должна быть приостановлена до тех пор, пока она не получит либо true, либо false Проверка значения локальной переменной может нормально работать без Promise, но это имеет значение при выполнении вызова API, потому что он асинхронный, поэтому вам необходимо указать маршрутизатору дождаться завершения вызова.

canActivate(): Promise<boolean> {
    return new Promise((resolve) => {
        if (localStorage.getItem('portfolioJWT') === null) {
            this.router.navigate(['/']);
            resolve(false);
        } else {
            const token = JSON.parse(localStorage.getItem('portfolioJWT'));

            this.authService.isAuth(token).subscribe(res => {
                console.log(res);
                if(!res) {
                    this.router.navigate(['/']);
                    console.log("NOT Authorized");
                    resolve(false)
                } else {
                    console.log("Authorized");
                    resolve(true)
                }
            });
        }
    })
}