AngularFire2 - 页面刷新后如何保持登录状态 [英] AngularFire2 - How to maintain logged in state after page refresh

问题描述

我正在使用AngularFire2来开发应用程序，而且我已经获得了使用Firebase的注册/登录功能，但是每次刷新页面时，登录状态都将被重置，并且不会持续。我不能完全找到这样做的功能，虽然我觉得我失去了一个非常小的东西。

$ b可以使用 AngularFireAuth 检查页面加载吗？ $ b

以下是我的认证提供程序代码：

  import'Injectable} from'@ angular / core'; 
从rxjs / Rx导入{Observable，Subject，BehaviorSubject}; 
从angularfire2导入{AngularFireAuth，FirebaseAuthState}; 
从./auth-info导入{AuthInfo}; 
从@ angular / router导入{路由器}; 
 
 @Injectable（）
导出类AuthService {
 
 
 static UNKNOWN_USER = new AuthInfo（null）; 
 
 authInfo $：BehaviorSubject< AuthInfo> = new BehaviorSubject< AuthInfo>（AuthService.UNKNOWN_USER）; 
 
 
构造函数（private auth：AngularFireAuth，私有路由器：路由器）{
 
} 
 
登录（电子邮件，密码）：Observable< ; FirebaseAuthState> {
 return this.fromFirebaseAuthPromise（this.auth.login（{email，password}））; 
 
 
 $ b signUp（email，password）{
 return this.fromFirebaseAuthPromise（this.auth.createUser（{email，password}））; 
} 
 
 
 fromFirebaseAuthPromise（promise）：Observable< any> {
 
 const subject = new Subject< any>（）; 
 
 promise 
 .then（res => {
 const authInfo = new AuthInfo（this.auth.getAuth（）。uid）; 
 this.authInfo $ .next（authInfo）; 
 subject.next（res）; 
 subject.complete（）; 
}，
 err => {
 this.authInfo $ .error（err）; 
 subject.error（err）; 
 subject.complete（）; 
}）; 
 
 return subject.asObservable（）; 
 
 
 $ b logout（）{
 this.auth.logout（）; 
 this.authInfo $ .next（AuthService.UNKNOWN_USER）; 
 this.router.navigate（['/ login']）; 
 
 
 
 $ b $ / code> 

！


解决方案

AngularFireAuth 是可观察并发出 FirebaseAuthState 值。如果用户登录并刷新页面， AngularFireAuth 将发出已认证的 FirebaseAuthState ;否则，它会发出 null 。

所以这样的事情应该接近解决你的问题：

 构造函数（private auth：AngularFireAuth，私有路由器：Router）{
 
 auth （authState）=> {
 if（authState）{
 const authInfo = new AuthInfo（authState.uid）; 
 this.authInfo $ .next（authInfo）; 
} 
}）; 
} 
  

I'm using AngularFire2 for an app and I've gotten the registration/login functionality working with Firebase, however, every time I refresh the page, the logged in state is reset and won't persist. I can't quite find functionality to do this, though I feel I'm missing something very small.

Can I use the AngularFireAuth to check on page load somewhere?

Here is my auth provider code:

import { Injectable } from '@angular/core';
import {Observable, Subject, BehaviorSubject} from "rxjs/Rx";
import {AngularFireAuth, FirebaseAuthState} from "angularfire2";
import {AuthInfo} from "./auth-info";
import {Router} from "@angular/router";

@Injectable()
export class AuthService {


  static UNKNOWN_USER = new AuthInfo(null);

  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);


  constructor(private auth: AngularFireAuth, private router:Router) {

  }

    login(email, password):Observable<FirebaseAuthState> {
        return this.fromFirebaseAuthPromise(this.auth.login({email, password}));
    }


    signUp(email, password) {
        return this.fromFirebaseAuthPromise(this.auth.createUser({email, password}));
    }


    fromFirebaseAuthPromise(promise):Observable<any> {

        const subject = new Subject<any>();

        promise
            .then(res => {
                    const authInfo = new AuthInfo(this.auth.getAuth().uid);
                    this.authInfo$.next(authInfo);
                    subject.next(res);
                    subject.complete();
                },
                err => {
                    this.authInfo$.error(err);
                    subject.error(err);
                    subject.complete();
                });

        return subject.asObservable();
    }


    logout() {
        this.auth.logout();
        this.authInfo$.next(AuthService.UNKNOWN_USER);
        this.router.navigate(['/login']);

    }

}

Thankyou in advance!

解决方案

AngularFireAuth is an observable and emits FirebaseAuthState values. If a user is signed in and the page is refreshed, AngularFireAuth will emit an authenticated FirebaseAuthState; otherwise, it will emit null.

So something like this should come close to solving your problem:

constructor(private auth: AngularFireAuth, private router:Router) {

  auth.subscribe((authState) => {
    if (authState) {
      const authInfo = new AuthInfo(authState.uid);
      this.authInfo$.next(authInfo);
    }
  });
}

这篇关于AngularFire2 - 页面刷新后如何保持登录状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！