Hide menu after Login #1664

berkansasmaz created 3 years ago

Support Team .NET Developer

Hi,

I will share step by step to help your question more. After doing all this, our application will show the menu or not depending on whether the user is logged in or not. Here are the minimum codes to meet these requirements:

Run the following command under the Angular folder: yarn ng generate component my-menu

Then, open the app.component.ts and execute the add method of ReplaceableComponentsService to replace your component with an ABP component as shown below:

It remains only to shape my-menu.component.html and my-menu.component.ts according to the requirements.

Here is my-menu.component.html:

<header>
    <div *ngIf="!hasLoggedIn">
        <div #navbarBrand>
            <abp-logo></abp-logo>
          </div>
          <abp-navbar-mobile></abp-navbar-mobile>
          <abp-navbar></abp-navbar>
          <abp-sidebar></abp-sidebar>
    </div>
    <div *ngIf="hasLoggedIn">
        <h1>Test QA 1664</h1>
        <app-root></app-root>
    </div>
</header>

my-menu.component.ts

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { AuthService } from '@abp/ng.core';

@Component({
  selector: 'app-my-menu',
  templateUrl: './my-menu.component.html',
  styleUrls: ['./my-menu.component.scss']
})
export class MyMenuComponent implements OnInit {
  get hasLoggedIn(): boolean {
    return this.oAuthService.hasValidAccessToken();
  }

  constructor(private oAuthService: OAuthService, private authService: AuthService) {}

  login() {
    this.authService.navigateToLogin();
  }

  ngOnInit() {}  
}

Please let us know if it works after you try it.

Also some links that I think might be useful: https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu

2 Answer(s)