Angular 2+ Firebase 身份验证 - 设置登录状态持久性 [英] Angular 2+ Firebase Authentication - Set Login State Persistence

问题描述

我已经使用 firebase 为身份验证服务中的 Angular 应用程序设置了身份验证，并且我正在尝试确保成功登录后会话状态的持久性.

I've set up authentication using firebase for an angular app in an auth service, and I'm trying to ensure session state persistence following successful login.

我已经看到默认情况下 firebase 应该具有状态持久性，但是应用程序中的当前登录仅持续到页面刷新后，然后再次需要登录，这似乎不正确.

I've seen that firebase is supposed to have state persistence by default, but current logins in the app only last until the page is refreshed, after which login is required again, which doesn't seem right.

我知道我必须使用 statePersistence 方法，如文档中所示，但这并没有说明如何在 Angular 2+ 应用程序中将其实际实现到登录/身份验证服务中.

I know that I have to use the statePersistence method, as shown in the documentation, but this doesn't make it clear as to how this is actually implemented into a login/auth service in angular 2+ apps.

如何在以下身份验证服务中实现会话 statePersistence?:

How to I implement session statePersistence into the following authentication service?:

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()

export class AuthService {

  private user: Observable<firebase.User>;

  isAuthenticated: boolean = false;

  constructor(private firebaseAuth: AngularFireAuth, private router: Router) {
    this.user = firebaseAuth.authState;
  }

  signIn(email: string, password: string) {
    this.firebaseAuth
        .auth
        .signInWithEmailAndPassword(email, password)
        .then(value => {
            console.log('Signed In');
            this.isAuthenticated = true;
            this.router.navigateByUrl('/dashboard');
        })
        .catch(err => {
            console.log('Sign-In Error: ', err.message);
        });
  }

  signInGoogle() {
    return this.firebaseAuth.auth.signInWithPopup(
        new firebase.auth.GoogleAuthProvider()
    )
  }

推荐答案

您正在导入整个 firebase 模块.只导入auth.以下对我有用:

You're importing the entire firebase module. Only import auth. The following works for me:

// Don't import the whole module, only `auth`.
import { auth } from 'firebase/app';

constructor(private readonly afAuth: AngularFireAuth) { }

signIn() {
  this.afAuth.auth.setPersistence(auth.Auth.Persistence.LOCAL).then(() => {
    // Now sign-in using your chosen method.
    return this.afAuth.auth.signInAnonymously();
  }).catch((error) => {
    // Handle errors here.
    let errorCode = error.code;
    let errorMessage = error.message;
    console.error(errorCode, errorMessage);
  });
}

这篇关于Angular 2+ Firebase 身份验证 - 设置登录状态持久性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！