angular - Angular:成功验证后不呈现顶部栏
问题描述
成功登录后,生成令牌并呈现除顶部栏之外的每个组件。我不明白发生了什么。下面是我的代码:
认证服务
private authStatusListener = new Subject<boolean>();
loginUser(authData) {
this.http.post<{ token: string }>(this.url + '/authenticate', authData).subscribe(response => {
const token = response.token;
if(token) {
this.isAuthenticated = true;
this.authStatusListener.next(true);
this.saveAuthData(token);
this.router.navigate(['/admin/dashboard']);
}
});
}
getAuthStatusListener() {
return this.authStatusListener.asObservable();
}
导航栏组件
userIsAuthenticated = false;
private authListenerSubs: Subscription;
ngOnInit() {
this.authListenerSubs = this.adminAuth.getAuthStatusListener().subscribe(isAuthenticated => {
this.userIsAuthenticated = isAuthenticated;
});
}
ngOnDestroy() {
this.authListenerSubs.unsubscribe();
}
导航栏 HTML
<mat-toolbar color="primary" *ngIf="userIsAuthenticated">
<span><a [routerLink]="['/admin/dashboard']" class="tabs">Admin</a></span>
<span class="space-right"></span>
<ul>
<li><button mat-button [routerLink]="['/admin/dashboard']" routerLinkActive="highlight" class="tabs">Dashboard</button></li>
<li><button mat-button [routerLink]="['/admin/create_category']" routerLinkActive="highlight" class="tabs">Exam Category</button></li>
<li><button mat-button [routerLink]="['/admin/create_question_category']" routerLinkActive="highlight" class="tabs">Question Category</button></li>
<li><button mat-button [routerLink]="['/admin/create_section']" routerLinkActive="highlight" class="tabs">Section Marks</button></li>
<li><button mat-button [routerLink]="['/admin/exam']" routerLinkActive="highlight" class="tabs">Exam</button></li>
<li><button mat-button [routerLink]="['/admin/question']" routerLinkActive="highlight" class="tabs">Question</button></li>
<li><button mat-icon-button class="tabs" (click)="onLogout()"><mat-icon>power_settings_new</mat-icon></button></li>
</ul>
</mat-toolbar>
<main><router-outlet></router-outlet></main>
我理解的是,虽然在服务中userIsAuthenticated
正在返回,但将其设置为. 请告诉我修改此代码的方法或任何其他方式。false
true
PS注销后此导航栏将不会出现
解决方案
推荐阅读
- c++ - 在 Eigen 中设置随机种子
- javascript - Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?
- spring-boot - spring boot eureka网关服务,如何开启额外的https端口
- amazon-web-services - 使用自定义容器映像在本地测试 AWS lambda
- php - 当它非常慢时如何优化phpExcel?
- swift - 如何检查 pod 版本是否与 Xcode 版本兼容
- python - Altair 图未使用 Python def 中的列名参数显示
- python - 我正在尝试使用 beautifulsoup4 抓取网站并请求库
- node.js - 如何在特定日期获取所有文件
- java - Camel-cxf:端口的协议不匹配