angular 2 + firebase 应用程序让用户在刷新时注销

Question

我不熟悉 Angular2、Firebase、SPA 等。这些天来，我的任务是向 Angular2（带有 Firebase 电子邮件和密码验证）应用程序添加一些新功能。该应用程序主要由一个博客（主页）、一个商店（/shop）和管理区域（/admin）表单组成，您可以管理博客文章和商店项目。任务的一项要求是，如果您在浏览器上点击刷新，则使应用程序保持会话，这样如果您在 /admin 区域的任何“页面”上，您将不会被带回登录表单，目前发生。我确实花了几个小时在网上寻找解决方案，但我没有找到。我试图保存一个本地存储令牌，但发现 firebase 已经这样做了，还有许多其他事情，但仍然找不到解决方案。应用程序已经有一个检查登录用户的机制和一个路由保护，用于管理博客 (/admin/bog-admin) 和管理区域中的管理产品 (/admin/product-admin) 部分。我将尝试发布我认为与此问题相关的内容，如果我忘记了任何内容，请随时要求更多代码 sn-ps。另外请简要说明您的解决方案，因为我也确实需要了解它。
user.service.ts :

import { Injectable } from '@angular/core';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';
import * as firebase from 'firebase';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';


@Injectable()
export class UserService implements CanActivate {
  userLoggedIn: boolean = false;
  loggedInUser: string;
  authUser: any;

  constructor(private router: Router, public toastr: ToastsManager) {
    firebase.initializeApp({
      apiKey: "AIzaSyB7VgN55gflpKAlmM41r2DCdUsy69JkLsk",
      authDomain: "angulargigabyte-966ef.firebaseapp.com",
      databaseURL: "https://angulargigabyte-966ef.firebaseio.com",
      projectId: "angulargigabyte-966ef",
      storageBucket: "angulargigabyte-966ef.appspot.com",
      messagingSenderId: "154241614671"
    })
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;
    return this.verifyLogin(url);
  }

  verifyLogin(url: string): boolean {
    if (this.userLoggedIn) {
      return true;
    }

    this.router.navigate(['/admin/login']);
    return false;
  }

  register(email: string, password: string) {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(function (error) {
        alert(`${error.message} Please Try Again!`);
      });
  }

  verifyUser() {
    this.authUser = firebase.auth().currentUser;

    if (this.authUser) {

      this.toastr.success('Alert', `Welcome ${this.authUser.email}`);
      this.loggedInUser = this.authUser.email;
      this.userLoggedIn = true;
      this.router.navigate(['/admin']);
    }
  }

  login(loginEmail: string, loginPassword: string) {
    firebase.auth().signInWithEmailAndPassword(loginEmail, loginPassword)
      .catch(function (error) {
        alert(`${error.message} Unable to login. Try again!`);
      });
  }

  logout() {
    this.userLoggedIn = false;
    firebase.auth().signOut().then(function () {

    }, function (error) {
      alert(`${error.message} Unable to logout. Try again!`);
    });
  }

}

login.component.ts

import { Component } from '@angular/core';
import {UserService} from '../adminShared/user.service';
import { Router } from '@angular/router';

@Component({
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
 })

export class LoginComponent { 
  email: string;
  password1: string;

  constructor(private userSVC: UserService, private router: Router){}

  login(){
    this.userSVC.login(this.email, this.password1);
    this.userSVC.verifyUser();
  }

  signup(){
    this.router.navigate(['/admin/signup']);
  }

  cancel(){
    this.router.navigate(['']);
  }



}

Answer 1

为什么你不使用 angularfire2？ (https://github.com/angular/angularfire2)

您可以使用 Observable authState，例如：

afAuth.authState.subscribe((resp) => {
  if (resp.uid){
    //user is already logged
  }
});

更多信息https://github.com/angular/angularfire2/blob/master/docs/5-user-authentication.md