登录和退出时无法更改侧面菜单 - 角度离子

Question

我可以发布登录请求，获取令牌并存储在本地存储中。

我可以注册，创建新令牌并将其存储在本地存储中。

最后，我可以按Logout并从本地存储中删除令牌。

问题：当用户登录时，我将用户重定向到仪表板页面，但菜单没有更新，因为我有代码检查app.component.ts文件中的isLoggedin而不是里面仪表板页面。

此外，当我退出时，令牌将从localstorage中删除并重定向到登录页面，但菜单不再更新。

login.ts

onSubmit(){
let loader = this.loadingCtrl.create({
  content: "Please wait..."
});
loader.present();
this.authService.login({email: email, password: password});
this.navCtrl.setRoot(DashboardPage);
loader.dismiss();
}

authService.ts

login(model: User) {
    this.http.post("http://localhost:8000/api/login", model)
    .subscribe(
      data => {
        var tokenObj = data.text();
        var token = JSON.parse(tokenObj).success.token;
        if(token){

        localStorage.setItem('currentUser',JSON.stringify({token: token}));
        this.isLoggedin = true;
        }
    },
      err => {
          console.log("Error Occurred: "+err);
      });
}


logout(): void
{
    localStorage.removeItem('currentUser');
    this.isLoggedin = false;
}

isLoggedIn() {
    if (localStorage.getItem("currentUser") == null) {
        this.isLoggedin = false;
        return this.isLoggedin;
    }
    else {
        return true;
    }
}

app.component.ts

rootPage: any = LoginPage;
activePage : any;
private token : string;
isLoggedin : boolean = false;

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private menuCtrl:MenuController, public authService : AuthenticationService) {
this.initializeApp();

this.token = this.authService.getToken();
this.isLoggedin = this.authService.isLoggedIn();


this.pages = [
  { title: 'Login', component: LoginPage, icon: 'log-in'  },
  { title: 'Register', component: RegisterPage, icon: 'person-add'  },
  { title: 'Dashboard', component: DashboardPage, icon: 'stats'  },
  { title: 'Portfolio', component: ProtabsPage, icon: 'images'  },
  { title: 'Reports', component: RtabsPage, icon: 'paper'  },
  { title: 'Profile', component: PtabsPage, icon: 'person'  },
  { title: 'Customize', component: SettingsPage, icon: 'options'  },
  { title: 'Contact', component: ContactPage, icon: 'call'  },
  { title: 'Logout', component: DashboardPage, icon: 'log-out'  },
];
this.activePage = this.pages[0];

}


Logout() {
    this.authService.logout();
    this.nav.setRoot(LoginPage);
}

app.html

<ng-container *ngFor="let p of pages">
<button  *ngIf="isLoggedIn && (p.title ==='Dashboard' || p.title ==='Portfolio' || p.title ==='Reports' || p.title ==='Profile' || p.title ==='Customize' || p.title ==='Contact')" padding ion-item class="menu-btn" text-center  [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
   <ion-icon  name="{{p.icon}}" ></ion-icon>
   <h4>{{p.title}}</h4>
 </button>
 <button  *ngIf="isLoggedIn && (p.title ==='Logout')" padding ion-item class="menu-btn" text-center  [class.activeHighlight]="checkActive(p)" (click)="Logout()" menuClose>
    <ion-icon  name="{{p.icon}}" ></ion-icon>
    <h4>{{p.title}}</h4>
  </button>
 <button  *ngIf="!isLoggedIn && (p.title ==='Register' || p.title ==='Login' || p.title ==='Portfolio' || p.title ==='Contact')" padding ion-item class="menu-btn" text-center  [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
    <ion-icon  name="{{p.icon}}" ></ion-icon>
    <h4>{{p.title}}</h4>
  </button>
</ng-container>

图像

Answer 1

改变这个：

isLoggedin : boolean = false;
.... 
this.isLoggedin = this.authService.isLoggedIn();

以下内容：

get isLoggedIn(){
  return this.authService.isLoggedIn();
}

使用您拥有的代码，isLoggedIn值已“固定”，并且未随其他组件/服务的任何更改而更改。您可以在auth服务中订阅它的更改，以便在记录状态的任何更改时做出反应。使用getter是一种简单的方法，因为get访问器可以通过Angular的循环来检查它的值。