时间戳

首页 > 解决方案 > 登录时隐藏按钮，未登录时显示其他按钮

html - 登录时隐藏按钮，未登录时显示其他按钮

问题描述

在我的 Angular 8 应用程序中，我试图更新一个下拉菜单，其中未登录时显示 2 个按钮，登录时显示 1 个按钮（Sign In以及Register未登录时和Sign Out登录时）。我无法使该功能正常工作。

我尝试过执行以下操作：

  1. 更改authService.afAuth.auth为authService.user（没有做任何事情）
  2. 更改(authService.afAuth.auth | async)为authService.afAuth.auth == true和authService.afAuth.auth == false（没有做任何事情）
  3. 更改按钮的位置（到工具栏之外 - 不起作用）

这里有几个文件片段 - 不知道从哪里开始寻找根本问题。

Mat-menu 部分header.component.html

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == true">Log In</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>

打开下拉列表的按钮（仍在 header.component.html 内）

<button mat-button [matMenuTriggerFor]="account">Account Management</button>

注销组件 .ts 文件（重定向注销部分的文件 - 不确定这是否只是未正确注销的问题）

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/shared/services/auth.service';

@Component({
  selector: 'app-signout',
  templateUrl: './signout.component.html',
  styleUrls: ['./signout.component.css']
})
export class SignoutComponent implements OnInit {

  constructor(
    public authService: AuthService
  ) { }

  ngOnInit() {
  }

}

这是 signout.component.html 文件

<div class="center">
    <h3>Sign Out</h3>
    <button mat-button (click)="authService.SignOut()">Confirm Sign Out</button>
</div>

以下是 auth.service.ts 文件的一些部分

constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,  
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {    
    /* Saving user data in localstorage when 
    logged in and setting up null when logged out */
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

...

get isLoggedIn(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
  }

...

SignOut() {
    return this.afAuth.auth.signOut().then(() => {
      localStorage.removeItem('user');
      this.router.navigate(['home']);
    })
  }

预期结果：用户已注销，sign inandregister按钮出现，sign out按钮消失。

实际结果：它要么： A. 不注销用户，在这种情况下，这是一个 auth.service.ts 问题 B. 即使在刷新后也没有检测到用户被注销的变化

我在控制台中没有收到任何错误。

标签： htmlangularangularfire2angularfireangular8

解决方案

正如@sagat 在评论中所说， header.component.ts 需要从这里更新：

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == true">Log In</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>

对此（注销时的假更改为真，登录和注册时的真更改为假）

<mat-menu #account="matMenu">
    <button mat-menu-item routerLink="/sign-in" *ngIf="authService.isLoggedIn == false">Log In</button>
    <button *ngIf="authService.isLoggedIn == false" mat-menu-item routerLink="/register">Register</button>
    <button *ngIf="authService.isLoggedIn == true" mat-menu-item routerLink="/signout">Sign Out</button>
</mat-menu>

推荐阅读