AngularFire 2 authState 在页面刷新时返回 null

Posted 2023-03-13

【中文标题】AngularFire 2 authState 在页面刷新时返回 null

【英文标题】：AngularFire 2 authState returning null on Page Refresh

【发布时间】：2019-03-31 09:29:27

【问题描述】：

我正在使用带有 AngularFire 2 的 firebase。

我的问题是，当我尝试刷新页面时，auth 实例返回 null。

这是我的身份验证服务的代码。

一切正常，但每当我刷新页面时，身份验证为空，我无法调用 firebase 数据库，因为我的规则要求用户进行身份验证。

export class AuthService 
private userDetails: Users = null;
private dbUsers;
public loginStatus = new BehaviorSubject(false);

public GOOGLE_OATH_SCOPES = 'email, https://www.googleapis.com/auth/drive';

constructor(
    private _firebaseAuth: AngularFireAuth,
    private router: Router,
    private firebase: AngularFireDatabase,
    private _userService: UserService
) 
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.setUserFromLocalstorage(currentUser);
    _firebaseAuth.authState.subscribe(
        (user) => 
             console.log("Step 1",user);
            if (user) 

            
            else 
                this.setUserFromLocalstorage(currentUser);
            
        
    );


setUserFromLocalstorage(currentUser) 
    if (currentUser && !_.isEmpty(currentUser)) 
        this.userDetails = currentUser;
     else 
        this.userDetails = null;
    ;

signInWithGoogle() 
    var provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters(
        prompt: 'select_account'
    );
    provider.addScope(this.GOOGLE_OATH_SCOPES);
    this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.NONE).then(() =>
        this._firebaseAuth.auth.signInWithPopup(
            provider
        ).then((result) => 
            localStorage.setItem('accessToken', result.credential.accessToken);
        )
    )


isLoggedIn() 
    if (!this.loginStatus.value) 
        return false;
     else 
        return true;
    



logout() 
    this._firebaseAuth.auth.signOut()
        .then((res) => 
            this.router.navigate(['/'])
            localStorage.clear()
            this.userDetails = null;
            this.loginStatus.next(false);
        
        );




getLoggedInUser() 
    return _.cloneDeep(this.userDetails);


setLoggedInUser(user: Users) 
    this.userDetails = user;
    localStorage.setItem("currentUser", JSON.stringify(user));

还有 AngularFireAuth：

export declare class AngularFireAuth 
    private zone;
    readonly auth: FirebaseAuth;
    readonly authState: Observable<User | null>;
    readonly idToken: Observable<string | null>;
    constructor(config: FirebaseOptions, name: string, platformId: Object, zone: NgZone);

我的登录方法：

this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.None).then(() =>
                this._firebaseAuth.auth.signInWithPopup(
                    provider
                ).then((result) => 

                )
    )

我该如何解决这个问题？

【参考方案1】：

问题在于您的登录方法。

this._firebaseAuth.auth.setPersistence(firebase.auth.Auth.Persistence.None).then(() =>
            this._firebaseAuth.auth.signInWithPopup(
                provider
            ).then((result) => 

            )
)

setPersistence(firebase.auth.Auth.Persistence.None) 行声明状态只会存储在内存中，并且会在窗口或活动刷新时被清除。

尝试使用firebase.auth.Auth.Persistence.Session 或firebase.auth.Auth.Persistence.Local

根据您的要求。

参考：https://firebase.google.com/docs/auth/web/auth-state-persistence