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

Posted 2023-03-22

【中文标题】如何在登录后打开离子侧菜单上检查身份验证？

【英文标题】：how to check authentication on ion-side menu open after login?

【发布时间】：2019-03-13 05:12:00

【问题描述】：

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

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>

登录后侧边菜单不显示... 但没有结果。

登录后如何在不刷新页面的情况下显示侧边菜单？

【问题讨论】：

控制台有错误吗？

控制台没有错误......

【参考方案1】：

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

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

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

【讨论】：

它的工作原理......但是现在如何从其他页面（例如（info.html）页面）禁用离子侧菜单