导航菜单项不会更改，除非它被刷新。答案

【问题标题】：Navmenu items doesn't change unless it's refreshed it.导航菜单项不会更改，除非它被刷新。
【发布时间】：2017-11-01 20:48:36
【问题描述】：

我有一个具有身份验证系统的 Angular 应用程序。在导航菜单中，我有登录、注销和显示用户名的文本。它工作得很好，但是，当用户登录时，我仍然看到相同的导航栏。登录应该消失并且注销以及用户名文本应该在那里。但事实并非如此。它们仅在用户刷新页面时才存在。我不知道我错过了什么。

这是我的navmenu.component.html

<li *ngIf="!currentUser"><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li *ngIf="currentUser"><a (click)="logout()"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
<li *ngIf="currentUser"><a><span class="glyphicon glyphicon-user"></span> {{ currentUser.firstName }} {{ currentUser.lastName }}</a></li>

这是我的navmenu.component.ts 代码：

import { Observable } from 'rxjs';
import { User } from './../../models/user';
import { Router } from '@angular/router';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
    currentUser: User;

ngOnInit() {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}


constructor(private authService: AuthService, private router: Router) {  }


   logout() {
      this.authService.logout();
      this.router.navigate(['/home']);
   }
}

最后，这是我的app.component.html 文件的样子：

<nav-menu></nav-menu>
<router-outlet></router-outlet>

【问题讨论】：

fngOnInit 方法只执行一次。您如何假设 NavMenuComponent 被通知用户已登录？

标签： asp.net angular web navbar

【解决方案1】：

ngOnInit 只会被调用一次，所以我建议执行以下操作：

auth.service.ts

// Your code here
authStateChanged: Subject<AuthState> = new Subject<AuthState>();
// Your code here

auth-state.enum.ts

export enum AuthState {
    Authorized,
    Unauthorized
}

component.ts

保持一切不变，只需稍微更改 ngOnInit。

ngOnInit() {
    this.authService.authStateChanged.subscribe(
        authState => { this.refreshCurrentUser(); }
    )
}

refreshCurrentUser() {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}

您可以添加更多登录信息来检查 authState，这只是适用于您的情况的基本示例。

现在在您的 auth.service 中，当您登录时，成功时只需执行以下操作：

this.authStateChange.next(AuthState.Authorized);

【讨论】：

这一次，登录时，我看到注销和显示用户名的文本。但是，当页面刷新时，它会返回到仅登录状态。我也将this.authStateChanged.next(AuthState.Unauthorized); 添加到我的 logput 函数中，但这次什么也没发生。

【解决方案2】：

您可以使用BehaviorSubject 检查localStorage 中是否有用户，并发出状态更改。

服务：

private user = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser')))
public user$ = this.user.asObservable();

setUser(user) {
  localStorage.setItem('currentUser', JSON.stringify(user))
  this.user.next(true)
}

当状态改变时，我们会调用setUser()。每个订阅者都会获得状态。

login() {
  this.authService.setUser({user: 'Admin'});
}

以及你想收听的每个组件，将其添加到构造函数中：

constructor(private authService: Service) {  
  authService.user$.subscribe(val => {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'))
  })
}

当然，当您想注销用户时，请执行...

logout() {
  this.authService.setUser(null)
}

【讨论】：