localstorage 值仅在页面重新加载后可见答案

【问题标题】：localstorage value visible only after page reloadlocalstorage 值仅在页面重新加载后可见
【发布时间】：2018-10-30 03:25:54
【问题描述】：

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

【问题讨论】：

标签： jwt angular6 angular2-jwt

【解决方案1】：

您的身份验证服务函数是一个回调，当所有操作完成时将触发成功或失败事件，因此代码 this.user = this.tokenService.getUser(); 在填充本地存储之前执行。尝试将此代码移动到 authService.authStatus 的 subscribe 方法中。

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

            }
        );
}

【讨论】：

【解决方案2】：

尝试拨打电话

this.user = this.tokenService.getIser()

在订阅中。

【讨论】：