当用户登录时，我想在导航栏上显示该用户的用户名。用户成功登录后，我已将令牌和用户名设置为localStorage。我的问题是，除非我刷新页面，否则用户名不会显示在导航栏上。
我不知道该怎么解决这个问题。
有人能帮我吗
谢谢。
登录组件
onSubmit = function () {
this.userService.loginUser(this.loginUserData).subscribe(
res => {
this.tokenService.handle(res);
this.authService.changeAuthStatus(true);
},
error => console.log(error)
);
}
身份验证服务
export class AuthService {
private loggedIn = new BehaviorSubject<boolean>(this._tokenService.loggedIn());
authStatus = this.loggedIn.asObservable();
user = this.tokenService.getUser();
changeAuthStatus(value: boolean) {
this.loggedIn.next(value);
}
constructor(private tokenService: TokenService) {}
}
代币服务
handle(res) {
this.setToken(res);
}
setToken(res) {
localStorage.setItem('token', res.access_token);
localStorage.setItem('user', res.user);
}
getToken() {
return localStorage.getItem('token');
}
getUser() {
return localStorage.getItem('user');
}
}
导航栏组件
ngOnInit() {
this.authService.authStatus
.subscribe(
value => {
this.loggedIn = value
}
);
//set the username on navbar
this.user = this.tokenService.getUser();
}
您的身份验证服务函数是一个回调，当所有操作完成时，它将触发成功或失败事件，因此在填充本地存储之前执行代码this.user = this.tokenService.getUser();。尝试在authService.authStatus.的订阅方法中移动此代码
ngOnInit() {
this.authService.authStatus
.subscribe(
value => {
this.loggedIn = value
}
);
//set the username on navbar
this.user = this.tokenService.getUser();
}
像这样。
ngOnInit() {
this.authService.authStatus
.subscribe(
value => {
this.loggedIn = value
this.user = this.tokenService.getUser();
}
);
}
尝试调用
this.user = this.tokenService.getIser()
订阅内部。