Angular2（最終版）とFirebase認証が永続的ではありません

Question

私はログインページで作業しています。ログインできて、すべて正常に動作しますが、私がウェブページをリフレッシュするときは、資格情報。ログインは永続的ではありません。

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のウェブサイトを捜したが、それに関するあらゆる情報を見つけることができなかった。

誰かが私のコードをご覧になってください。 ありがとうございました！

Answer 1

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; 
    }) 

で認証されているかどうかを確認するに は、これが私の作品と私はNG2でちょうど初心者です。この

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)); 

    } 

を使用することができます。お役に立てれば。