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

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

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

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

login.component.ts

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

app-routing.module.ts

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

AuthGuard

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

AuthService

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

ошибка. функции требуется возвращаемое значение

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

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

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

С уважением, Ян


firebase firebase-authentication angular angular-router-guards
person Jan Kreischer    schedule 28.12.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

   return false;
});

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

person Derviş Kayımbaşıoğlu    schedule 28.12.2018

arrow_upward
3
arrow_downward

Я уже использовал 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/

person B.Benjo    schedule 28.12.2018