Javascript Firebase Angular 7身份验证持久性

我是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;
 }
}

@可注入({
providedIn:'根'
})
导出类身份验证服务{
私人用户：可观察；
私有用户详细信息：firebase.User；
构造函数（专用angularFireAuth:angularFireAuth）{
this.user=this.angularFireAuth.user；
此文件为.user.subscribe(
（用户）=>{
如果（用户）{
this.userDetails=用户；
}
否则{
this.userDetails=null；
}
}
);
}
SigningLogleLogin（）{
返回此.angularfieauth.auth.setPersistence（firebase.auth.auth.Persistence.LOCAL）
.然后（（）=>
this.angularfieauth.auth.signInWithPopup(
新的firebase.auth.GoogleAuthProvider（）
)
);
}
isLoggedIn（）：布尔值{
返回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;
 }
}

@可注入({
providedIn:'根'
})
导出类AuthGuard实现了CanActivate{
构造函数（专用路由器：路由器，专用authService:authService）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：
可观察的|承诺|布尔{
if（this.authService.isLoggedIn（））{
返回true；
}
this.router.navigate（['login']，{queryParams:{returnUrl:state.url}}）；
返回false；
}
}

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

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

我认为所有这些问题实际上都与同一个问题有关：我的auth状态持久化实现有些错误

所以我的问题很简单：我做错了什么？：）

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

---

谢谢你的帮助。：）

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

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')
        })
      )
   }
  
}

导出类AuthGuard实现CanActivate{
建造师(
二等兵：AngularFireAuth，
专用路由器：路由器
) {}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察{
返回此。\u authService.fAuth.authState.pipe(
第一个（），
映射（用户=>！！用户），
点击（已验证=>{
log（“auth guard loggedin”，已验证）；
已验证的| | this._router.parseUrl（'/auth/login'））
})
)
}
}

您必须使用

onAuthStateChanged

侦听器来检测应用程序中的当前用户状态。用户应保持登录状态并在重新启动后继续生存，直到调用注销。

import firebase from'firebase/app'等待this.angularFireAuth.setPersistence（firebase.auth.auth.Persistence.LOCAL）