Firebase: держать пользователя в системе под углом 7

Question

Я использую firebase и angularfire2 в системе аутентификации!

Проблема в том, что после обновления пользователю необходимо снова войти в систему!Мне нужно избежать этой проблемы, поэтому я обнаружил, что firebase дает мне эту возможность, используя authState

, но все еще не работает!

Это код для службы авторизации:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/internal/observable';
import { NavController } from '@ionic/angular';
import { ToastMessagesService } from './toast-messages.service';
import * as firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  public user: Observable<firebase.User>;
  public userDetails: firebase.User = null;


  constructor(
    private af: AngularFireAuth,
    private navCtrl: NavController,
    private statusMessage: ToastMessagesService
  ) {

    this.user = af.authState;

    this.user.subscribe(
      user => this.userDetails = user
    )


  }

  async siginInRegular(username: string, password: string) {
    try {

      // const credentials = this.af.auth.email
      return await this.af.auth.signInWithEmailAndPassword(username, password).then(
        user => {
          if (user) {
            this.navCtrl.navigateForward('/home');
            this.statusMessage.message(`Welcome ${user.user.email}`);
          }
        },
        err => {
          console.log(err);
        }
      );
    } catch (error) {
      console.dir(error);
    }
  }

  async register(username: string, password: string) {
    try {
      return await this.af.auth.createUserWithEmailAndPassword(username, password).then(
        user => {
          this.navCtrl.navigateForward('/profile');
          this.statusMessage.message(`Welcome ${user.user.email}`);
        }
      );
    } catch (error) {
      console.dir(error);
    }
  }

  signOut() {
    return this.af.auth.signOut();
  }

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


}

Код охраны:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { NavController } from '@ionic/angular';
import { AngularFireAuth } from 'angularfire2/auth';

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



  constructor(
    private auth: AuthService,
    private navCtrl: NavController,
    private af: AngularFireAuth
  ) {

  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {


    if (this.auth.isLoggedIn()) {
      return true
    }

    console.log('Access denied!');
    return false;

  }
}

Answer 1

Firebase фактически автоматически зарегистрирует пользователя при перезагрузке страницы.Но поскольку вы обрабатываете вход только в блоке then(), это происходит только тогда, когда вы явно входите в них.

Чтобы это исправить, вы хотите использовать слушатель onAuthState, как показано в получить текущего зарегистрированного пользователя :

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

В отличие от обработчика then(), этот обработчик onAuthStateChanged будет вызываться при каждом изменении состояния аутентификации пользователя.в том числе при перезагрузке страницы.

Поскольку вы используете AngularFire2, вы также можете использовать af.auth.subscribe, как показано здесь: Как получить firebase.User в AngularFire2