javascript - Firebase Angular 7 身份验证持久性

Question

我是 Firebase 的新手，我正在尝试从 Angular 7 应用程序实现身份验证。

这是我的身份验证服务:

@Injectable({
  providedIn: 'root'
})
export class AuthService {
 private user: Observable<firebase.User>;
 private userDetails: firebase.User;

 constructor(private angularFireAuth: AngularFireAuth) {
   this.user = this.angularFireAuth.user;
   this.user.subscribe(
     (user) => {
       if (user) {
         this.userDetails = user;
       }
       else {
         this.userDetails = null;
       }
     }
   );
 }

 signInGoogleLogin() {
   return this.angularFireAuth.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)
        .then(() =>
       this.angularFireAuth.auth.signInWithPopup(
         new firebase.auth.GoogleAuthProvider()
       )
     );
 }

 isLoggedIn(): boolean {
   return this.userDetails != null;
 }
}

这是我的 AuthGuard 实现:

@Injectable({
 providedIn: 'root'
})
export class AuthGuard implements CanActivate {

 constructor(private router: Router, private authService: AuthService) { }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
      Observable<boolean> | Promise<boolean> | boolean {
   if (this.authService.isLoggedIn()) {
     return true;
   }
   this.router.navigate(['login'], { queryParams: { returnUrl: state.url}});
   return false;
 }
}

我的问题是:持久性似乎不起作用。每当我刷新页面时，我都必须登录，每当我导航到另一个需要身份验证的组件时，我都需要再次登录。

当然，如果我使用“signInWithRedirect”而不是“signInWithPopup”，我会陷入一个日志循环，在该循环中我被重定向到我的登录页面，发现我没有登录，然后尝试登录我，将我重定向到我的登录页面发现我没有登录，等等。

我认为所有这些问题实际上都与同一个问题有关:我的身份验证状态持久性实现有些错误。

所以我的问题很简单: 我究竟做错了什么 ？ :)

我希望能够登录，然后在刷新时保持登录状态。

谢谢您的帮助。 :)

Answer 1

如果有人来这里寻找答案，我就是这样做的
auth.service.ts

import { auth, firestore } from 'firebase/app';

 constructor(
    private _fAuth: AngularFireAuth,
  ) {}

public async login(authInfo: UserAuthInfo) {
    if(authInfo.rememberMe) {
       await this._fAuth.setPersistence(auth.Auth.Persistence.LOCAL)
       console.log("local persistance", true);
    }
    const credential = await this._fAuth.signInWithEmailAndPassword(authInfo.username, authInfo.pass);
    ...
}

auth.guard.ts

export class AuthGuard implements CanActivate {

  constructor(
    private _fAuth: AngularFireAuth,
    private _router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> {
      return this._authService.fAuth.authState.pipe(
        first(),
        map(user => !!user),
        tap(authenticated => {
          console.log("auth guard loggedin", authenticated);
          authenticated || this._router.parseUrl('/auth/login')
        })
      )
   }
  
}