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

登录.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);
  }
}

登录.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 网站上搜索了 Persistency，但找不到任何相关信息。

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

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

登录你可以使用这个

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 的新手。希望这会有所帮助。