Я уже некоторое время пытаюсь реализовать Firebase Auth.Я следовал многому учебнику, но этот представляет мою текущую версию кода.
Я импортировал AngularFireModule
и AngularFireAuthModule
в app.module.ts
.Кроме того, я создал следующую службу и создал имя входа, которое вызывает методы из службы.
Я знаю, что служба вызывается успешно, так как console.log возвращает правильный ввод.Кроме того, страница перезагружается, но ничего не происходит («?» Добавляется к ссылке при перезагрузке).
Кто-нибудь знает проблему?Я уже использую хостинг Firebase, поэтому я предполагаю, что правильно реализовал Firebase.
export class AuthService {
user: User;
constructor(public afAuth: AngularFireAuth, public router: Router) {
this.afAuth.authState.subscribe(user => {
if (user) {
this.user = user;
localStorage.setItem('user', JSON.stringify(this.user));
} else {
localStorage.setItem('user', null);
}
});
}
async login(email: string, password: string) {
try {
console.log('uff');
await this.afAuth.auth.signInWithEmailAndPassword(email, password);
this.router.navigate(['admin']);
} catch (e) {
alert('Error!' + e.message);
}
}
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return user !== null;
}
async logout() {
await this.afAuth.auth.signOut();
localStorage.removeItem('user');
this.router.navigate(['']);
}
}
Маршрутизация:
const routes: Routes = [
{ path: '', component: FrontComponent },
{ path: 'cases', component: CaseListComponent },
{ path: 'cases/:id', component: TemplateComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'admin', component: AdminComponent, children: [
{ path: '', redirectTo: 'front', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'front', component: FrontComponent },
]},
];
Логин:
<div class="container-fluid min-vh-100 d-flex justify-content-center">
<form class="align-self-center">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" #email required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" #password required>
</div>
<button class="btn btn-primary" (click)="authService.login(email.value, password.value)">Submit</button>
</form>
</div>
<li *ngIf="authService.isLoggedIn" class="nav-item">
<a class="nav-link" (click)="authService.logout()">Logout</a>
</li>
Typescript:
constructor(public authService: AuthService) { }