角2 + firebase應用程序獲取用戶註銷刷新

Question

所有新手都意味着Angular2，Firebase，SPA等。現在我有一項任務爲Angular2添加一些新功能（使用Firebase電子郵件& pw auth）應用程序。該應用程序主要由博客（主頁），商店（/店鋪）和管理區域（/ admin）組成，您可以管理博客文章和商店物品。這項任務的一個要求是，如果您在瀏覽器中進行刷新，則使應用程序保持會話，以便如果您位於/ admin區域的任何「頁面」中，則不會將其重新帶回登錄表單，而目前發生。我在網上花了幾個小時尋找解決方案，但我找不到一個解決方案。我試圖保存一個本地存儲標記，但發現firebase已經做到了，還有很多其他的東西，但仍然找不到解決方案。應用程序已經有了一種機制來檢查登錄用戶，以及管理員博客（/ admin/bog-admin）上使用的路線警衛，並管理管理區域中的產品（/ admin/product-admin）部分。我會盡量發佈我認爲與此問題相關的內容，如果我忘記了任何內容，請隨時索取更多代碼片段。也請簡要解釋你的解決方案，因爲我真的需要了解它。
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）

您可以使用可觀察authState，如：

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

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