CODEWITHSUNDEEP
angulartypescript
Jon
Jon

Reputation: 91

how do i select a menu based on whether user is logged in or not in angular app

I have created 2 side drawer menus in angular app which display on different pages within the angular app. Menu 2 includes more links which are displayed when the user logs in. However, if you click on the homepage in the side menu after logging in (which has menu 1 without the logged in extras currently) it logs out and reverts back to the standard menu.

How do I select the menu that displays on each page depending on whether the user is logged in or not? Not everyone will be logging into this app, in fact vast majority wont log in, hence I don't want the homepage to be the login screen.

Any ideas would be hugely welcome! Not sure if you need to see any code I have written but if so just let me know what is relevant. Many thanks

code implemented is:

authentication.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { User } from '../../app/services/user';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';


@Injectable( {
 providedIn: "root"
})
export class AuthenticationService {

public isLoggedIn = false;

app.component.ts

constructor(public authentication: AuthenticationService) {}

app.component.html

<ion-app>
<div *ngIf="authentication.isLoggedIn">
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay" menuId="menu">
   <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle menu="menu" auto-hide="false" *ngFor="let p of 
navigate">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title}}
          </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>
</div>
<div *ngIf="!authentication.isLoggedIn">
<ion-split-pane contentId="main-content2">
<ion-menu contentId="main-content2" type="overlay" menuId="menu2">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle menu="menu2" auto-hide="false" *ngFor="let p of   
 navigate2">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="main-content2"></ion-router-outlet>
</ion-split-pane>
</div>
</ion-app>

the menu works for when loading the app but when I login, the menu for when logged out still shows, have I done something wrong above? Many thanks

Upvotes: 2

Views: 1927

Answers (2)

Nam Dao
Nam Dao

Reputation: 409

you can do this by using the angular directive NgIf. For example:

Create a service component, called account.service.ts and store a variable called isLoggedIn. Make sure to change this variable depending on whether the user has logged in or not. Run the command: ng g s services/account to generate the service.

account.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: "root"
})
public export AccountService {
    public isLoggedIn = false;
}

In your menu component page, inject the service through the constructor

menu.component.ts:

constructor(public account: AccountService) {}

Now, in your menu HTML page, do the following:

HTML

<div *ngIf="account.isLoggedIn">
    // Your nav bar when the user is logged in.
</div>
<div *ngIf="!account.isLoggedIn">
    // Your nav bar when the user is not logged in.
</div>

NOTE: Make sure to import CommonModules to use the NgIf directive.

Upvotes: 2

Stefan
Stefan

Reputation: 14863

Based on you question, you already have a logic how you know if a user is logged in or not. You can use this logic to display two different menus for logged in and not logged in users. A simple ngIf will do the trick. (I assume that the homepage is not the same for logged in and not logged in users).

Upvotes: 0

Related Questions