2016-11-04 29 views
2

我正在登录页面上工作,我可以登录并且一切正常,但每次刷新网页时,我都必须重新登录网站并写入我的证书。登录不持久。 这里是我的代码:Angular2(最终版本)和Firebase身份验证并非持久

auth.guard.ts

import { Injectable } from "@angular/core"; 
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router"; 
import { AuthService } from "./auth.service"; 
import { Observable } from "rxjs/Rx"; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthService, private router: Router) {} 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     let url: string = state.url; 
     return this.checkLogin(url); 
    } 

    checkLogin(url: string): boolean { 
     if (this.authService.isAuthenticated()) { return true; } 

     // Store the attempted URL for redirecting 
     this.authService.redirectURL = url; 

     // Navigate to the login page if the user access Guarded pages 
     this.router.navigate(['/signin']); 
     return false; 
    } 
} 

auth.service.ts

import { Injectable } from "@angular/core"; 
import {Router} from "@angular/router"; 
import { User } from "./user.interface"; 
declare var firebase: any; 

@Injectable() 
export class AuthService{ 
    constructor(private router: Router) {} 
    redirectURL: string; 
    signupUser(user: User) { 
    firebase.auth().createUserWithEmailAndPassword(user.email, user.password) 
     .then(() => { 
      this.router.navigate(['/home']); 
     }) 
     .catch(function (error) { 
      document.getElementById("error").textContent = error.message; 
     }); 
    } 

    signinUser(user: User) { 
     firebase.auth().signInWithEmailAndPassword(user.email, user.password) 
      .then (() => { 
       this.router.navigate(['home']) 
      }) 
      .catch(function (error) { 
       console.log(error) 
      }); 
    } 

    logout() { 
    firebase.auth().signOut(); 
    this.router.navigate(['/signin']); 
    } 

    isAuthenticated() { 
    var user = firebase.auth().currentUser; 
     return !!user; 
    } 
} 

Login.component.ts

import { Component, OnInit } from '@angular/core'; 
import {FormGroup, Validators, FormBuilder} from "@angular/forms"; 
import {CustomValidators} from "../validators/email.validator"; 
import {PasswordValidator} from "../validators/password.validator"; 
import {AuthService} from "../services/auth.service"; 

@Component({ 
    selector: 'neutron-sign-up', 
    templateUrl: './sign-up.component.html', 
    styleUrls: ['./sign-up.component.css'] 
}) 
export class SignUpComponent { 
    myForm: FormGroup; 

    constructor(private authService: AuthService) {} 

    onSignup() { 
    this.authService.signupUser(this.myForm.controls['SignUpForm'].value); 
    } 
} 

Login.component。 html

<div class="container"> 
    <form class="div" [formGroup]="myForm" novalidate (ngSubmit)="onSignup()" autocomplete="off"> 
    <div formGroupName="SignUpForm" class="form-group"> 
     <div class="form-group"> 
     <label for="email">Email</label> 
     <input formControlName="email" type="email" class="form-control" id="email" name="email"> 
     </div> 
     </div> 
     <div id="error"></div> 
     <label for="password">Password</label> 
     <input type="password" class="form-control" formControlName="password" id="password" name="password"> 
    <div formGroupName="SignUpForm" class="form-group"> 
     <label for="confirmPassword">Retype password</label> 
     <input formControlName="confirmPassword" type="password" class="form-control" id="confirmPassword" name="confirmPassword"> 
    </div> 
    <button type="submit" [disabled]="!myForm.valid" class="btn btn-default">Submit</button> 
    </form> 
</div> 

我在App.module.ts中有我的Firebase配置。我搜索了持久性的Firebase网站,但无法找到任何有关它的信息。

如果有人可以看看我的代码,请。 谢谢!

回答

0

你可以使用AngularFire,这很容易实现。只需按照设置here。 要检查用户进行身份验证我的代码是

import { AngularFire,AuthProviders,AuthMethods } from 'angularfire2'; 
    .... 
    public isLoggedIn:boolean=false; 
    constructor(public af: AngularFire){} 
    .... 
    isAuthenticated(){ 
     this.af.auth.subscribe(auth =>{ 

    if(auth){ 
     return this.isLoggedIn=true; 
    } 
     return this.isLoggedIn=false; 
    }) 

用于登录您可以使用此

login(userName:string,password:string) { 
    this.af.auth.login({ email: userName, password:password },{ 
    provider: AuthProviders.Password, 
    method: AuthMethods.Password, 
    }).then(()=>{ 
     console.log("logging in..."); 
     this.router.navigate(['home']); 
    }) 
    .catch(error => console.log(error.message)); 

    } 

这对我的作品,我只是在NG2一个新手。希望这可以帮助。