Информация о пользователе не отображается при входе в систему, но отображается при регистрации - PullRequest
Новая
       7

Информация о пользователе не отображается при входе в систему, но отображается при регистрации

0 голосов
/ 07 февраля 2020

это моя первая попытка аутентификации пользователя. В моем auth.service я создал функцию входа в систему с помощью метода signInWithEmailAndPassword. Затем я использую этот метод в своей функции signUp для входа в систему после создания пользователя. 

constructor(
      private db: AngularFirestore,
      private fireAuth: AngularFireAuth,
      private router: Router
      ) { 
        // Find auth state and fetch Firestore user document
        this.user = this.fireAuth.authState.pipe(
          switchMap( (user) => {
            // user is logged in
            if ( user ){
              return this.db.doc<User>(`users/${user.uid}`).valueChanges();
            } else {
            // user is logged out
              return of(null)
            }
          })
        )
      }

  async signUp( email: string, password: string)  {
    return this.fireAuth.auth
        .createUserWithEmailAndPassword( email, password )
          .then( newUser => {
            this.db.doc(`users/${newUser.user.uid}`).set(
              {
                email: email,
                uid: newUser.user.uid
              }
            )})
          .then( () => {
            this.signIn( email, password )
          })
  }

  async signIn( email: string, password: string ){
    return this.fireAuth.auth
        .signInWithEmailAndPassword( email, password )
  }

Затем в моем компоненте я тестирую вход в систему и отображаю различную информацию в зависимости от состояния авторизации пользователя. Проблема в том, что когда я регистрирую пользователя, все работает нормально. Но когда я перезагружаю страницу или использую кнопку «Вход», шаблон #authenticated больше не работает. 

<div *ngIf="auth.user | async; then authenticated else guest">
    <!-- template will replace this div -->
</div>

<!-- User NOT logged in -->
<ng-template #guest>
<h3>Howdy, GUEST</h3>
<p>Login to get started...</p>

<input type="text" [(ngModel)]="email" placeholder="email">
<input type="password" [(ngModel)]="password" placeholder="password">

<button (click)="signUp()"> Sign Up
</button>
<button (click)="signIn()"> Sign In
</button>

</ng-template>


<!-- User logged in -->
<ng-template #authenticated>
<div *ngIf="auth.user | async as user">
    <h3>Howdy, {{ user.email }}</h3>
    <p>UID: {{ user.uid }}</p>
    <button (click)="auth.signOut()">Logout</button>
</div>
</ng-template>

Если я удаляю * ngIf = "auth.user | asyn c как пользователя", div отображается без информации, но если он у меня есть, он работает только в том случае, если пользователь зарегистрирован. Извините за длинный вопрос, но любая помощь будет оценена. Новое в кодировании, и это моя первая попытка.

...