angular - Angular2 (slutgiltig version) och Firebase-autentisering är inte persistent


Jag arbetar på en inloggningssida, jag kan logga in och allt fungerar perfekt men varje gång jag uppdaterar webbsidan måste jag logga in igen på webbplatsen och skriva mina uppgifter. Inloggningen är inte ihållande. Här är min kod:

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>

Jag har min Firebase-konfiguration i App.module.ts. Jag sökte på Firebase-webbplatsen efter Persistency men kunde inte hitta någon information om det.

Om någon kunde titta på min kod, tack!

Svar #1

Du kan använda AngularFire som är mycket lättare att implementera. Följ bara installationen här. För att kontrollera om användaren är autentiserad är min kod

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

För att logga in kan du använda detta

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

  }

Detta fungerar för mig och jag är bara en nybörjare i ng2. Hoppas detta hjälper.