Ionic 4 Ion-menu

Hi everyone, I am new to ionic and creating my first app, how do I disable menu on login page,
Currently, when I do so, it hides on the entire application. See code below.
login.page.ts

import { Component, OnInit } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { Plugins } from ‘@capacitor/core’;

import { HttpClient } from ‘@angular/common/http’;

import { HTTP } from ‘@ionic-native/http/ngx’;

import { ToastController } from ‘@ionic/angular’;

import { LoadingController } from ‘@ionic/angular’;

import { MenuController } from ‘@ionic/angular’;

const {SplashScreen} = Plugins;

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.page.html’,

styleUrls: [’./login.page.scss’],

})

export class LoginPage implements OnInit {

user: any = {};

loading: any = {};

componentDidLoad(){

SplashScreen.hide();

}

constructor( private router: Router, private http: HttpClient, private toastCtrl:ToastController, public loadingController: LoadingController,private menu: MenuController) {

this.menu.enable(false, 'first');

}

async loginWithSpinner() {

this.loading = await this.loadingController.create({

  message: 'Please wait...',

  //duration: 2000

});

await this.loading.present();

this.login();

}

ngOnInit() {

}

async successToast() {

await this.toastCtrl.create({

  message: "Welcome "+this.user['email'],

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

async failedToast() {

await this.toastCtrl.create({

  message: "Login Failed, Check Email and Password. ",

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

async emptyFieldsToast() {

await this.toastCtrl.create({

  message: "Notice! All Fields Are Rquired",

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

login(){

if(this.user['email'] == null || this.user['pass'] == null ){

  this.emptyFieldsToast();

}else{

this.http.get('https://prochpetskillsinstitute.co.zm/ionic_api/index.php?email='+this.user['email']+'&pwd='+this.user['pass']).subscribe((response: any) => {

  console.log(response);

  if(response.success == 1){

    //console.log("success");

    this.successToast();

    sessionStorage.setItem('email', response.email);

    //this.loading.dismiss();

    this.router.navigate(['home']);

  }else{

    //this.loading.dismiss();

    this.failedToast();

  }

});

}

}

navigateToSignupPage(){

this.router.navigate(['signup'])

 }

 goToPrivacyPage(){

  this.router.navigate(['policy'])

   }

   goToForgotPasswordPage(){

  this.router.navigate(['fogotpassword'])

   }

}

Once disabled, the menu will stay that way until you enable it. You can either choose to do that on pages that want it enabled, or when the login page leaves. The latter approach is used by the conference app’s tutorial page.

Incidentally, your API breaks an important REST contract requirement and presumably has a massive security hole.

A GET request must be able to be cached and therefore rerun one, two, or forty times without ill effect. It isn’t supposed to impact server-side state. It’s a bad fit for login. Login actions should be implemented as POST endpoints instead. This will also fix the fact that you are putting plaintext passwords in URLs, which is bad because they get stored and exposed in server logs and by proxies. Secrets need to go in request bodies, not in URLs.

I’m not seeing your login process returning anything (such as a JWT) that is intended for use on further authenticated requests. That tells me that you’re trying to do your “security” client-side, by gating off functionality in the app simply based on whether you have an email address in client-side storage. That doesn’t actually secure anything, because you have no control over the client-side execution context.

The only way to properly secure things in a networked webapp is on the backend, where you do control the environment. Each authenticated request needs to present a valid token, and then you don’t have to care whether somebody has spoofed things.

Finally, don’t mix HTTP clients. Get rid of @ionic-native/HTTP and just use Angular’s HttpClient.

this.router.url returns url of the page. So if you currently in login page use *ngIf="router.url!='/login'"
to hide the menu button

@rapropos This is so educative, thanks so much. Learning a lot from this forum, amazing.

@mani0011 Thanks for your response. I really appreciate it.