Я только начинаю интегрировать angular универсальный в уже существующее приложение, и я замечаю, что на секунду страница отображается с неправильным макетом, и когда страница полностью загружается, все выглядит нормально.
Это пример:
Я получаю статус входа при загрузке страницы следующим образом:
this.authService.isLoggedIn.subscribe(res => {
this.isLoggedIn = res;
});
И устанавливаю другой макет в зависимости от результата, если true или false:
<div *ngIf="isLoggedIn" class="user-logged">
// user logged in
</div>
<div *ngIf="!isLoggedIn" class="user-logged">
// user not logged in
</div>
Но когда служба возвращает true (что означает, что пользователь вошел в систему), на секунду я вижу состояние не вошедшего в систему, затем страница загружается, и все выглядит нормально. Это также происходит со всеми проверками BreakpointObserver.
ОБНОВЛЕНИЕ 1: Это то, что я пробовал: я создал AppConfigService:
@Injectable()
export class AppConfigService {
private isLoggedStatus: boolean;
constructor(private authService: AuthService) { }
public isLoggedIn(): boolean {
return this.isLoggedStatus;
}
load() {
return new Promise((resolve, reject) => {
this.authService.isLoggedIn.subscribe(loggedInStatus => {
this.isLoggedStatus = loggedInStatus;
resolve(true);
});
});
}
}
В моем AuthService :
private isLoginSubject = new BehaviorSubject<boolean>(this.isAuthenticated);
get isLoggedIn(): Observable<boolean> {
return this.isLoginSubject.asObservable();
}
get isAuthenticated(): boolean {
const token = this.getToken();
if (token) {
if (jwtHelper.isTokenExpired(token)) {
return false;
} else {
return true;
}
} else {
return false;
}
}
В моем app.module.ts
export function appConfigFactory(provider: AppConfigService) {
return () => provider.load();
}
providers: [
AppConfigService,
{
provide: APP_INITIALIZER,
useFactory: appConfigFactory,
deps: [AppConfigService],
multi: true
}
]
Я думаю, что проблема заключается в использовании локального хранилища на стороне сервера, но если это проблема, как я могу проверить если пользователь залогинен?