Значение 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');
    }
}

компонент navbar

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.

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

внутри подписки.