angular - Angular2 (phiên bản cuối cùng) và Xác thực Firebase không bền vững

Tôi đang làm việc trên một trang Đăng nhập, tôi có thể đăng nhập và mọi thứ hoạt động hoàn hảo nhưng mỗi khi tôi làm mới trang web, tôi phải đăng nhập lại vào trang web và nhập thông tin đăng nhập của mình. Việc đăng nhập không được duy trì. Đây là mã của tôi:

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

Đăng nhập.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);
  }
}

Đăng nhập.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>

Tôi có cấu hình Firebase của mình trong App.module.ts. Tôi đã tìm kiếm trên trang web của Firebase về Persistency nhưng không thể tìm thấy bất kỳ thông tin nào liên quan đến nó.

Nếu ai đó có thể xem qua mã của tôi, làm ơn. Cảm ơn bạn!

Câu trả lời #1

Bạn có thể sử dụng AngularFire, điều này dễ triển khai hơn rất nhiều. Chỉ cần làm theo cài đặt ở đây. Để kiểm tra xem người dùng có được xác thực hay không, mã của tôi là

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

Để đăng nhập, bạn có thể sử dụng cái này

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

  }

Điều này có hiệu quả với tôi và tôi chỉ là một người mới trong ng2. Hy vọng điều này hữu ích.