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.
