Использование службы для проверки подлинности пользователя, защита не работает

Question

Я реализую страницу аутентификации в firebase. Поэтому я настроил Angular service UserService примерно так:

export class UserService {

  public authenticated: boolean;
  public error: any;
  public currentUser: User;

  constructor(public afAuth: AngularFireAuth) {
    this.authenticated = false;
    this.afAuth.authState.subscribe(authenticated => {
      if (authenticated) {
        this.authenticated = true;
      }
    });
  }

  async loginWithGoogle() {
    try {
      const result = await this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
      this.authenticated = true;
      console.log(result.user);
    } catch (e) {
      this.error = e;
    }
  }

  async loginWithFacebook() {
    try {
      await this.afAuth.auth.signInWithPopup(new auth.FacebookAuthProvider());
      this.authenticated = true;
    } catch (e) {
      this.error = e;
    }
  }

}

Кажется, это работает нормально. Но потом, когда я пытаюсь получить доступ к маршруту, защищенному следующим охранником:

export class AuthenticatedGuard implements CanActivate {
  constructor(public userService: UserService, private router: Router) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    alert(this.userService.authenticated);
    if (this.userService.authenticated) {
      return true;
    }
    this.router.navigate(['/']);
    return false;
  }
}

Но this.userService.authenticated всегда false.

Есть ли лучший способ сделать это? Если нет, то что здесь не так? Может быть authenticated должен быть Observable охранником подписаться?

Answer 1

Я бы получил метод authenticated() вместо использования логического атрибута.Ваш логический атрибут всегда будет иметь одинаковое значение.Попробуйте добавить следующий метод:

get authenticated(){
  if(this.afAuth.auth.currentUser) {
  this.currentUser = this.afAuth.auth.currentUser
  return true;
  }
  else {
    return false
  };    
}

, а затем используйте this.userService.authenticated() вместо this.userService.authenticated

EDIT

Я также изменил быКонструктор вашей UserService to:

constructor(public afAuth: AngularFireAuth) {
    this.authenticated = this.authenticated()
  }

Вы должны помнить, что вам нужно использовать функцию authenticated () вместо логической проверки подлинности.Это потому, что, несмотря на то, что класс является одноэлементным, различные компоненты не уведомляются автоматически об изменениях в переменной.