Question

我正在编写一个包含用户身份验证的应用程序。如果用户已成功登录，导航栏将显示其用户名否则它将是默认的“登录/注册”按钮。我能够部分实现这一目标。成功登录后，它重定向到我的主页组件，导航栏不显示我的用户名，但是当我刷新页面时，它显示我的用户名。谁能帮我解决这个问题？

这是我的app.component.html

<app-navbar></app-navbar>
<router></router-outlet>
<app-footer></app-footer>

这是我的navbar.component.html

<nav class="navbar navbar-expand-lg shadow">
  <img class="navbar-dark" src="../../assets/images/ACADEMY.png" alt="devsmen academy logo">
  <button class="navbar-toggler remove-border" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-controls="collapse-navbar" aria-expanded="false" aria-label="Toggle navigation"
          (click)="isCollapsed =  !isCollapsed" [attr.aria-expanded]="isCollapsed">
    <span class="navbar-toggler-icon"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>
  <div class="collapse navbar-collapse" id="collapse-navbar" [ngbCollapse] = "isCollapsed">
    <div class="navbar-nav mx-auto">
      <a class="nav-item nav-link active text-dark" routerLink=""><b>Home</b>
        <span class="sr-only">Home</span>
      </a>
      <a class="nav-item nav-link text-dark" routerLink="academy-home"><b>Academy</b></a>
      <a class="nav-item nav-link text-dark" routerLink=""><b>CodeWars</b></a> <!-- We don't have a component for codewars-->
      <a class="nav-item nav-link text-dark" routerLink="team-page"><b>Team</b></a>
      <a class="nav-item nav-link text-dark" routerLink="blog-page"><b>Blog</b></a>
    </div>
    <div class="navbar-nav" *ngIf="!hasLoggedIn">
      <a class="nav-item nav-link text-dark" routerLink="sign-in">Login</a>
      <a class="nav-item nav-link text-dark" routerLink="sign-up"> SignUp</a>
    </div>
    <div class="navbar-nav" *ngIf="hasLoggedIn">
      <a class="nav-item nav-link text-dark" [routerLink]="route">{{ username }}</a>
    </div>
  </div>
</nav>

这是我的navbar.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {UserService} from '../services/users/user.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public isCollapsed = true;
  @Input() private hasLoggedIn = false;
  @Input() private route;
  @Input() private username;
  constructor(private service: UserService) { }

  async ngOnInit() {
    // check if the user has logged in
    if ( localStorage.getItem('userid') !== null) {
      this.hasLoggedIn = true;
      this.route = 'profile/' + localStorage.getItem('userid');
      // check if username exists local
      if ( localStorage.getItem('username') === null ) {
        // this creates a new item and stores it in localStorage
        this.service.getUserById(localStorage.getItem('userid')).subscribe( res => {
          localStorage.setItem('username', res.username);
        });
      }
    }
    this.username = localStorage.getItem('username');
  }
}

Answer 1

您可以将您的用户对象（id，用户名，first_name，last_name ...）保存为JSON格式，以下为示例：

login.component.ts

    login() {
      this.service.login(user_name, password).subscript(
        (res: any) => {
          localStorage.setItem('userProfile', JSON.stringify(res.user));
        }
      );
    }

navbar.component.ts

 ngOnInit() {
      this.user = JSON.stringify(localStorage.getItem('userProfile'));
 }

navbar.component.html

{{user.first_name}}
{{user.last_name}}

如何在Angular 6中更改组件的状态？

1 个答案: