Кнопка входа / выхода пользователя в меню Angular 8 не обновляется - PullRequest
Новая
       24

Кнопка входа / выхода пользователя в меню Angular 8 не обновляется

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

У меня есть mat-toolbar с кнопкой входа / выхода, где пользователь веб-сайта может входить или выходить в любое время. У меня есть служба аутентификации, которая создает Observable с пользовательскими данными и использует *ngIf="!(authService.user$ | async) для кнопки входа в систему. Это не работает, хотя, если я не вручную обновлю sh всю страницу. Почему это так и что с этим делать? Я думал, что Observable будет способом, который действительно будет работать в этих ситуациях, но, очевидно, я что-то упускаю.

Я также пытался подписаться на Observable как user в app.component.ts и использование user в шаблоне, но это, похоже, не помогает. Я знаю, что есть несколько вопросов, касающихся входа пользователя в Observables, и вопросов о refre sh, но они не дали мне понимания того, почему это не работает.

Возможно, мне следует добавить, что я используя интерфейс User со свойством roles для авторизации на основе ролей, поэтому он не совпадает с firebase.User.

Соответствующие части authentication.service.ts : 

@Injectable({
  providedIn: 'root'
})

export class AuthenticationService {
  user$: Observable<User>;
  viewAllUser: Boolean = false;

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router) {

    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`Users/${user.uid}`).valueChanges()
        } else {
          return of(null)
        }
      }))
  }

  /* Sign up */
  SignUp(email: string, password: string) {
    this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        window.alert("You have been successfully registered!");
        this.updateUserData(result.user)
        //console.log(result.user);
      }).catch((error) => {
        window.alert(error.message);
        //console.log(error.user);
      });
  }

  /* Sign in */
  SignIn(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        window.alert("You have been successfully signed in!");
        this.updateUserData(result.user);
        //console.log(result.user);
      }).catch((error) => {
        window.alert(error.message);
        //console.log(error.user);
      });
  }

  /* Sign out */
  SignOut() {
    this.router.navigate(['user-main']);
    this.afAuth.auth.signOut();
    window.alert("You have been successfully signed out!");
  }

 private updateUserData(user) {
        // Sets user data to firestore on login
        const userRef: AngularFirestoreDocument<any> = this.afs.doc(`Users/${user.uid}`);
        const data: User = {
          uid: user.uid,
          email: user.email,
          roles: {
            role1: true //default role
          }
        }
        return userRef.set(data, { merge: true }) //Update in non-destructive way 
      }
}

app.component. html: 

<body>
  <mat-toolbar>
    <span>
      <button mat-menu-item *ngIf="!(authService.user$ | async) as user" routerLink="/user-main">Login</button>
      <button mat-menu-item (click)="authService.SignOut()" routerLink="/user-main" *ngIf="authService.user$ | async">Logout</button>
      {{user.email}} //for testing
    </span>
    <span>
      <button mat-icon-button [matMenuTriggerFor]="appMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </span> 
  </mat-toolbar>
  <mat-menu #appMenu="matMenu">
    <!-- Only to be shown to logged in users: -->
    <button mat-menu-item *ngIf="authService.user$ | async" routerLink="/user-main">User main</button>
    <button mat-menu-item *ngIf="authService.user$ | async" routerLink="/page_x">Page X</button>
    <button mat-menu-item *ngIf="authService.canViewData(authService.user$ | async)==true" routerLink="/secret_page_y">Secret page Y</button>
  </mat-menu>

  <!--This is where the routes are shown-->
  <router-outlet></router-outlet>
</body>

app.component.ts: 

import { Component } from '@angular/core';
import { AuthenticationService } from './shared/authentication.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user;

  constructor(public authService: AuthenticationService) {
    this.authService.user$.subscribe(user => this.user = user);
  }
}

1 Ответ

1 голос
/ 26 февраля 2020

Вы должны использовать BehaviorSubject для пользователя и использовать его следующим образом:

authentication.service.ts: 

    private currentUserSubject = new BehaviorSubject<User>({} as User);
    public currentUser = this.currentUserSubject.asObservable().pipe(distinctUntilChanged());

  getCurrentUser(): User {
    return this.currentUserSubject.value;
  }
      /* Sign up */
      SignUp(email: string, password: string) {
        this.afAuth.auth.createUserWithEmailAndPassword(email, password)
          .then((result) => {
            window.alert("You have been successfully registered!");
            this.updateUserData(result.user);
            //console.log(result.user);
          }).catch((error) => {
            window.alert(error.message);
            //console.log(error.user);
          });
      }

      /* Sign in */
      SignIn(email: string, password: string) {
        return this.afAuth.auth.signInWithEmailAndPassword(email, password)
          .then((result) => {
            window.alert("You have been successfully signed in!");
            this.updateUserData(result.user);
            //console.log(result.user);
          }).catch((error) => {
            window.alert(error.message);
            //console.log(error.user);
          });
      }


      private updateUserData(user) {
        // Sets user data to firestore on login
        const userRef: AngularFirestoreDocument<any> = this.afs.doc(`Users/${user.uid}`);
        const data: User = {
          uid: user.uid,
          email: user.email,
          roles: {
            role1: true //default role
          }
        }
        this.currentUserSubject.next(data); // --> here
        return userRef.set(data, { merge: true }) //Update in non-destructive way 
      }
}

app.component.ts: 

this.authService.currentUser.subscribe(user => this.user = user);

auth-guard.service.ts: 

const user = this.authService.getCurrentUser();
if (user.id) {
   return true;
} else {
   return false;
}
...