Ionic framework 如何在Ionic 4的侧菜单中管理会话？

Ionic应用程序

带有

侧菜单

这里我的应用程序概念是博客应用程序 在这方面，我需要登录，配置文件等

Ionic应用程序

带有

侧菜单

若用户想要喜欢或评论任何博客文章，他必须先登录

因此，如果用户已经登录，我想管理会话，因此从侧菜单隐藏登录

离子项目

，否则注销

离子项目

反之亦然

这是代码

home.html

   <ion-app>
  <ion-split-pane contentId="main-content" >

    <ion-menu  contentId="main-content" >
      <ion-header>
        <ion-toolbar  color="primary">

          <ion-title>Lady Help Lady</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content color="primary">
        <ion-list >
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item color="primary" [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon" color="light"></ion-icon>
              <ion-label color="light">
                {{p.title}}
              </ion-label>
            </ion-item>

          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" >
            <ion-item color="primary"  *ngIf="showBtnLogin"> 
                <ion-icon slot="start" name="log-in" color="light"></ion-icon>
                <ion-label color="light" (click)="login()">
                   Login
                </ion-label>
            </ion-item>

            <ion-item color="primary"  *ngIf="!showBtnLogin">
                <ion-icon slot="start" name="log-out" color="light"></ion-icon>
                <ion-label color="light" (click)="logout()" > Log Out</ion-label>
            </ion-item>

   </ion-menu-toggle>
        </ion-list>
      </ion-content>

    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>


</ion-app>

login.page.ts

validateInputs() {
    const mobile = this.postData.mobile.trim();
    const password = this.postData.password.trim();
    return (
      this.postData.mobile &&
      this.postData.password &&
      mobile.length > 0 &&
      password.length > 0
    );
  }

  formLogin() {
    if (this.validateInputs()) {
      this.loader.loadingPresent();
      console.log(this.postData);
      this.authService.login(this.postData).subscribe(
        (res: any) => {
          if (res.status === true) {
            this.loader.loadingDismiss();
            // Storing the User data.
            this.storageService.store(AuthConstants.AUTH, res.logindata);
            this.router.navigate(['/home/blog']);
          } else {
            this.loader.loadingDismiss();
            this.toastService.presentToast(res.error);
          }
        },
        (error: any) => {
          this.loader.loadingDismiss();
          this.toastService.presentToast('Network Issue.');
        }
      );
    } else {
      this.loader.loadingDismiss();
      this.toastService.presentToast('Please enter mobile or password.');
    }
  }

StorageService.ts

import { Injectable } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;
@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }
  // Store the value
async store(storageKey: string, value: any) {
  const encryptedValue = btoa(escape(JSON.stringify(value)));
  await Storage.set({
  key: storageKey,
  value: encryptedValue
  });
  }

  // Get the value
  async get(storageKey: string) {
  const ret = await Storage.get({ key: storageKey });
  return JSON.parse(unescape(atob(ret.value)));
  }

  async removeStorageItem(storageKey: string) {
  await Storage.remove({ key: storageKey });
  }

  // Clear storage
  async clear() {
  await Storage.clear();
  }
}

---

你也可以这样做 在html中

 <ion-menu-toggle auto-hide="false" >
          <ion-item color="primary"  *ngIf="showBtnLogin"> 
              <ion-icon slot="start" name="log-in" color="light"></ion-icon>
              <ion-label color="light" (click)="login()">
                 Login
              </ion-label>
          </ion-item>

          <ion-item color="primary"  *ngIf="!showBtnLogin">
              <ion-icon slot="start" name="log-out" color="light"></ion-icon>
              <ion-label color="light" (click)="logout()" > Log Out</ion-label>
          </ion-item>

 </ion-menu-toggle>

---

在.ts文件中更改一些代码，就是这样

  showBtnLogin = true;
  public appPages = [
    {
      title: 'Blog',
      url: '/home/blog',
      icon: 'home'
    },
    {
      title: 'Profile',
      url: '/home/profile',
      icon: 'cog',
      status: true
    },
    {
      title: 'Change Password',
      url: '/home/change-password',
      icon: 'lock',
      status: true
    },

    {
      title: 'About Us',
      url: '/home/about-us',
      icon: 'cog',
      status: true
    },
    {
      title: 'Privacy Policy',
      url: '/home/privacy-policy',
      icon: 'settings',
      status: true
    }
    ,
    {
      title: 'Terms & Conditions',
      url: '/home/terms-conditions',
      icon: 'paper',
      status: true
    },
    {
      title: 'Enable Location',
      url: '/home/enable-location',
      icon: 'pin',
      status: true
    }
    ,
    {
      title: 'Donation',
      url: '/home/donation',
      icon: 'card',
      status: true
    }
  ];

在你的ngOnInit中

   ngOnInit() {
    this.authService.userData$.subscribe((res: any) => {
      this.authUser = res;
      if (res === null) {
        console.log(res);
        this.showBtnLogin = false;
        for (let i = 0; i < this.appPages.length; i++) {
          if (this.appPages[i].title == 'Profile') {
            this.appPages[i].status = false;
          }
          if (this.appPages[i].title == 'Change Password') {
            this.appPages[i].status = false;
          }
        }
      } else {
        this.showBtnLogin = true;
      }
    });
  }

ngOnInit（）{
this.authService.userData$.subscribe（（res:any）=>{
this.authUser=res；
如果（res==null）{
控制台日志（res）；
this.showBtnLogin=false；
for（设i=0；i

如果您的配置文件和更改密码索引没有更改，那么您可以通过索引直接更改状态，而无需使用for循环

最后在你注销的时候

  logout() {
    this.authService.logout();
    for (let i = 0; i < this.appPages.length; i++) {
      if (this.appPages[i].title == 'Profile') {
        this.appPages[i].status = false;
      }
      if (this.appPages[i].title == 'Change Password') {
        this.appPages[i].status = false;
      }
    }
  }

logout（）{
this.authService.logout（）；
for（设i=0；i

在.html文件中

<ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngIf="p.status">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false">
            <ion-item color="primary" *ngIf="showBtnLogin">
              <ion-icon slot="start" name="log-in" color="light"></ion-icon>
              <ion-label color="light" (click)="login()">
                Login
              </ion-label>
            </ion-item>

            <ion-item color="primary" *ngIf="!showBtnLogin">
              <ion-icon slot="start" name="log-out" color="light"></ion-icon>
              <ion-label color="light" (click)="logout()"> Log Out</ion-label>
            </ion-item>

          </ion-menu-toggle>
        </ion-list>

{{p.title}}
登录
注销

您是否了解我的项目流程？能否与我共享两个文件？我将解决您的问题如果用户登录，然后配置文件，更改密码，将显示和注销也或如果用户未登录，然后隐藏所有上述选项，只有登录将是有效的，但它仍然没有任何其他方式来做请让我知道这是紧急的你能检查你的身份验证服务吗？控制台您的身份验证服务数据或调试您的代码，因为当我手动将showbtnlogin设置为true或falseYes时，此代码正在工作手动将showbtnlogin设置为true或falseYes它也在工作日志中获取值如果用户登录，您可以将您的用户数据保存在localstorage中以检查用户是否登录。我还有另外两个文件login.ts和StorageService.ts更新

  logout() {
    this.authService.logout();
    for (let i = 0; i < this.appPages.length; i++) {
      if (this.appPages[i].title == 'Profile') {
        this.appPages[i].status = false;
      }
      if (this.appPages[i].title == 'Change Password') {
        this.appPages[i].status = false;
      }
    }
  }

<ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngIf="p.status">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false">
            <ion-item color="primary" *ngIf="showBtnLogin">
              <ion-icon slot="start" name="log-in" color="light"></ion-icon>
              <ion-label color="light" (click)="login()">
                Login
              </ion-label>
            </ion-item>

            <ion-item color="primary" *ngIf="!showBtnLogin">
              <ion-icon slot="start" name="log-out" color="light"></ion-icon>
              <ion-label color="light" (click)="logout()"> Log Out</ion-label>
            </ion-item>

          </ion-menu-toggle>
        </ion-list>