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

            }
        );
}

Answer 2

尝试拨打电话

this.user = this.tokenService.getIser() 

在订阅里面。