как проверить аутентификацию на ионном боковом меню, открытом после входа в систему? - PullRequest
Новая
       31

как проверить аутентификацию на ионном боковом меню, открытом после входа в систему?

0 голосов
/ 13 марта 2019

как проверить аутентификацию в ионном меню, открытом после входа в систему ...

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 Ответ

0 голосов
/ 13 марта 2019

Вы должны показать / скрыть меню, используя переменную isLoggedIn

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

В настоящее время вы используете служебную переменную user, которая недоступна в HTML-шаблоне, поэтому меню не отображается.

...