Проблема перенаправления AngularFireAuth с защитой угловой маршрутизации

Question

Уважаемое сообщество stackoverflow,

У меня следующая проблема.Я пытаюсь использовать FirebaseAuthentication вместе с Angular7, и я пытаюсь защитить маршруты с помощью охранников, чтобы только зарегистрированные пользователи могли, например, посетить / profile url.

Мой логин ( логин.component.ts ) выглядит следующим образом.Сначала я импортирую AngularFireAuth и использую его для входа в систему с помощью Google, Facebook или электронной почты.В методе ngOnInit я подписываюсь на authState , поэтому я могу перенаправить пользователя.Это все работает нормально.

На следующем шаге я хотел написать AuthGuard для профиля /. url, поэтому только зарегистрированные пользователи могут просматривать их профили.Не вошедшие в систему пользователи должны быть перенаправлены на / login сначала.

My AuthGuard ( auth.guard.ts ) выглядит следующим образом и использует класс AuthService ( auth.service.ts ) для внутреннего использования.Этот AuthService внедряется и предлагает метод isAuthenticated .Если пользователь аутентифицирован, ему должен быть представлен его профиль, в противном случае AuthGuard должен вернуть false и перенаправить его для входа в систему.

AuthService выглядит следующим образом, а его метод isAuthenticated должен возвращать true, если пользователь вошел в систему, и false в противном случае.

Если я не добавлю эту пустышку вернет true в конце функции, он всегда будет перенаправлять меня обратно на / login также, когда я вхожу в системуОн также говорит мне, что функция не имеет возвращаемого значения

Так что я знаю, что этой подписки недостаточно в isAuthenticated метод, но мне любопытно, как будет выглядеть наилучшее решение, если пользователь вошел в систему.

Если у кого-то из вас есть решение с наилучшей практикой, было бы очень хорошо, если бы он мог показать мне.Там не очень много правильных учебных пособий.

Тем временем я буду стараться искать решение в Google.Я надеюсь, что кто-то из вас может помочь мне с этой проблемой.Спасибо:)

С наилучшими пожеланиями Ян

Answer 1

Я уже использовал Angular FireAuth для реализации того же, что и у вас, и вот что я придумал:
Функция isAuthenticated, то есть isLoggedIn

public isLoggedIn() {
    return this.afAuth.authState.pipe(first()).toPromise();
}

Ив моей охране:

auth.guard.ts

canActivate (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.isLoggedIn().then((value) => {
        if (value) {
            return true;
        } else {
            this.router.navigate(['./login']);
            return false;
        }
    });
}

Надеюсь, это поможет вам;)

РЕДАКТИРОВАТЬ
Я использовал эти учебники, чтобы лучше понять, как использовать AngularFireAuth: https://angularfirebase.com/tag/authentication/

И в вашем случае, у вас есть этот: https://angularfirebase.com/lessons/router-guards-to-redirect-unauthorized-firebase-users/

Answer 2

подписка не может вернуть значение.

вы можете использовать карту вместо подписки.

return this.afAuth.authState.pipe(map((res) => {
   if (res && res.uid)
      return true;

   return false;
});

также изменить подпись возвращаемого значения метода isAuthenticated с boolean на Observable<boolean> или Observable<boolean> | boolean