角2 + firebase应用程序获取用户注销刷新

问题描述：

所有新手都意味着Angular2，Firebase，SPA等。现在我有一项任务为Angular2添加一些新功能（使用Firebase电子邮件& pw auth）应用程序。该应用程序主要由博客（主页），商店（/店铺）和管理区域（/ admin）组成，您可以管理博客文章和商店物品。这项任务的一个要求是，如果您在浏览器中进行刷新，则使应用程序保持会话，以便如果您位于/ admin区域的任何“页面”中，则不会将其重新带回登录表单，而目前发生。我在网上花了几个小时寻找解决方案，但我找不到一个解决方案。我试图保存一个本地存储标记，但发现firebase已经做到了，还有很多其他的东西，但仍然找不到解决方案。应用程序已经有了一种机制来检查登录用户，以及管理员博客（/ admin/bog-admin）上使用的路线警卫，并管理管理区域中的产品（/ admin/product-admin）部分。我会尽量发布我认为与此问题相关的内容，如果我忘记了任何内容，请随时索取更多代码片段。也请简要解释你的解决方案，因为我真的需要了解它。
user.service.ts：
角2 + firebase应用程序获取用户注销刷新

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(['']); 
    } 



}

答

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

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

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

谢谢回答。我害怕我可能不会被允许使用比我已经在应用程序中的其他框架。 –

角2 + firebase应用程序获取用户注销刷新

相关推荐