Не удается подключить Firebase Auth к Angular Web App, страница перезагружается - PullRequest
1 голос
/ 22 июня 2019

Я уже некоторое время пытаюсь реализовать 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) { }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...