Javascript 无法更改登录和注销时的侧菜单-错误

我能够发布登录请求，获取令牌并存储在本地存储中

我能够注册、创建新令牌并将其存储在本地存储器中

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

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

另外，当我注销时，令牌将从本地存储中删除并重定向到登录页面，但菜单也不会更新

login.ts authService.ts app.component.ts app.html 形象 更改此项：

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

对下列事项：

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

---

使用您拥有的代码，isLoggedIn值是“固定”的，不会随着其他组件/服务的任何更改而更改。您可以在auth服务中订阅它的更改，以便对日志状态的任何更改作出反应。使用getter也是一种简单的方法，因为get accessor通过Angular的循环检查其值。

在app.component.ts文件中？我得到错误：Typescript错误'；'预期。在哪一行？我已在问题中添加了图像您缺少结尾}？可能的修复方法：将activepage移动到共享服务。并设置路由上每个组件的值

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);
}

<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>

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

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