Question

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

这是我的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>

Answer 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);

Answer 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)
}

Navmenu项目不会更改，除非它已刷新。

2 个答案: