使用AngularFire重新登录并更新页面刷新时的UI

我正在使用Angular和firebase auth启动一个项目，我有一个auth服务和一个navbar组件，其中一些项目根据用户是否登录而显示

问题是，当我按F5重新加载页面时，导航栏中的项目始终显示为用户未登录时的状态，然后仅在我导航到其他路线时更新

身份验证服务：

@Injectable()
export class AuthService {

    private user: firebase.User;

    constructor(
        public afAuth: AngularFireAuth,
        private http: HttpClient
    ) {
        //Adds an observer for changes to the signed-in user's ID token, which includes sign-in, sign-out, and token refresh events.
        firebase.auth().onIdTokenChanged(u => {
            this.user = u;
        });
    }

    isLoggedIn(): Observable<boolean> {
        return new Observable(o => {
            o.next(this.user != null)
        });
    }

    doLogout() {
        return new Promise((resolve, reject) => {
            if (firebase.auth().currentUser) {
                this.afAuth.auth.signOut();
                resolve();
            }
            else {
                reject();
            }
        });
    }
}

你试过设置吗

例如，您可以在登录方法中执行以下操作：

this.angularFireAuth.auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
})

export class NavButtonsComponent implements OnInit {

    constructor(
        public dialog: MatDialog,
        private auth: AuthService,
        private router: Router,
        private toaster: ToastrService
    ) { }

    ngOnInit() {
    }

    openLogin() {
        this.dialog.open(LoginComponent, {
            minWidth: 300,
            maxWidth: 600
        });
    }

    logout() {
        this.auth.doLogout().then(r => {
            this.toaster.success("You have logged out successfully");
            this.router.navigate(['/']);
        });
    }
}

this.angularFireAuth.auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
})