如何在登录后检查离子侧菜单上的身份验证？

Question

如何在登录后检查离子侧菜单上的身份验证...

app.component.ts

 this.afAuth.auth.onAuthStateChanged((user) => 
            {
                if (user == null) 
                {
                    console.log("Logged out");
                    this.isLoggedIn = false;
                    this.phoneNumber = '';
                    this.nav.navigateForward('home');
                } 
                else 
                {
                    this.isLoggedIn = true;
                    this.phoneNumber = user.phoneNumber;
                    console.log("Logged in");
                    console.log(user);
                    this.nav.navigateForward('doctor-info');
                        var self = this;
                        var doctorIn = self.db.collection('DoctorList').doc(localStorage.id)
                            doctorIn.ref.onSnapshot(function(doc) {
                                    let userInfo = doc.data();
                                    self.userProfile = userInfo;
                            })
                }
            }
        );

app.component.html

<ion-app>
    <ion-split-pane>
        <ion-menu style="--ion-background-color: var(--ion-color-primary);" *ngIf="user != null"> 
            <ion-header>
                <ion-toolbar style="display: inline;">
                    <ion-item>
                        <ion-thumbnail slot="start">
                            <img *ngIf="userProfile?.ProfileInformation" class="profileImg" style="height: auto;border: groove;" [src]="userProfile.ProfileInformation.doctorProfile" />
                            <!-- <img *ngIf="!userProfile" class="profileImg" [src]="assets/imgs/default_user.jpeg" /> -->
                        </ion-thumbnail><br><br>
                        <div class="ion-text-capitalize" style="text-transform: capitalize;">
                            {{ userProfile?.ProfileInformation?.doctorName }}
                        </div>
                    </ion-item>
                </ion-toolbar>
            </ion-header>
                <ion-content>
                    <ion-list>
                        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
                                    <ion-item [routerLink]="[p.url]" routerDirection="root">
                                        <ion-icon item-left [name]="p.icon" style="zoom: 1;"></ion-icon>
                                        <ion-label style="margin: 12px;">
                                            {{ p.title }}
                                        </ion-label>
                                    </ion-item>
                        </ion-menu-toggle>
                    </ion-list>
                </ion-content>
        </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

登录后离子侧菜单没有显示...但结果没有结果。

如何在登录后显示侧边菜单而不刷新页面？

Answer 1

您必须使用变量isLoggedIn显示/隐藏菜单

<ion-menu style="--ion-background-color: var(--ion-color-primary);" *ngIf="isLoggedIn">
</ion-menu>

目前您使用的服务变量user在html模板中无法访问，这是菜单未显示的原因。