时间戳

首页 > 解决方案 > 如何在登录后打开离子侧菜单上检查身份验证？

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

问题描述

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

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>

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

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

标签： angularangularfire2angularfireionic4side-menu

解决方案

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

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

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

推荐阅读