仅在重新加载页面后，localstorage值才可见

Question

当用户登录时，我想在导航栏上显示该用户的用户名。用户成功登录后，我已将令牌和用户名设置为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();
}

Answer 1

尝试拨打电话

this.user = this.tokenService.getIser() 

在订阅内。

Answer 2

您的auth服务功能是一个回调，当所有操作完成后将触发成功或失败事件，因此将在填充本地存储之前执行代码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();

            }
        );
}