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

Question

Ionic app 与 side menu

这里我的应用概念是博客应用 在这里我需要登录，配置文件等 Ionic app 和 side menu 如果用户想点赞或评论任何博客 post 他必须先登录

所以如果已经登录的用户我想管理会话所以从侧面菜单隐藏登录ion-item否则注销ion-item反之亦然

这是代码

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>

home.page.ts

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import { MenuController } from '@ionic/angular';
import { AuthService } from '../services/auth.service';
import { StorageService } from '../services/storage.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

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

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


  ];
  public authUser: any;
  showBtnLogin = true;
  // showBtnLogout: boolean = true;
 currentUser: any;
  constructor(private router: Router,
              private authService: AuthService, 
              private menu: MenuController, 
              public storageService: StorageService) { }

  ngOnInit() { 
    this.authService.userData$.subscribe((res: any) => {
      this.authUser = res;
       if (res === null) {
         console.log(res);
         this.showBtnLogin = false;
       } else {
        this.showBtnLogin = true;
       }  
     });
  }
  logout() {
    this.authService.logout();
  }
  login() {
    this.router.navigate(['/home/login']);
  }


}

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

Answer 1

你也可以这样做在你的 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: boolean = true;
currentUser: any;

ngOnInit() { 
    this.authService.userData$.subscribe((res: any) => {
      this.authUser = res;
      // this.postData.user_id = res.id;
      console.log(this.authUser.id);
      this.currentUser =  this.authUser;
       if (res === null) {
         this.showBtnLogin = true;
       } else {
        this.showBtnLogin = false;
       }  
     });
}

logout() {
    this.authService.logout();
}

login() {
    this.router.navigate(['/home/login']);
}

Answer 2

在此处更改 .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;
      }
    });
  }

如果您的个人资料和更改密码索引没有更改，那么您可以直接通过索引更改状态，而无需使用 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;
      }
    }
  }

在您的 .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>

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

How to Manage Session in side menu in Ionic 4?

ionic-framework

ionic4