angular - Angular2 (versione finale) e Firebase Authentication non sono persistenti

Sto lavorando su una pagina di accesso, riesco ad accedere e tutto funziona perfettamente, ma ogni volta che aggiorno la pagina web, devo accedere di nuovo al sito e inserire le mie credenziali. L'accesso non è persistente. Ecco il mio codice:

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>

Ho la mia configurazione di Firebase in App.module.ts. Ho cercato sul sito web di Firebase informazioni sulla persistenza, ma non sono riuscito a trovarne alcuna.

Se qualcuno potesse dare un'occhiata al mio codice, per favore. Grazie!

Risposta n. 1

Puoi usare AngularFire che è molto più facile da implementare. basta seguire la configurazione qui. Per controllare se l'utente è autenticato il mio codice è

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

Per il login puoi usare questo

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

  }

Questo funziona per me e sono solo un principiante in ng2. Spero che questo aiuti.