Hide menu items using Routes

Asked

Viewed 597 times

0

I want to get information like the menu for a different route, for example, the customer "Mkt Place" is not seen as "Seller" customer options, provided by the menu when the user enters the login in the 'mktplace' or 'seller" depending on the choice

<nav class="navbar-default navbar-static-side" role="navigation">
      <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
          <li class="nav-header">
            <div class="profile-element" dropdown>
              <img alt="image" class="img-circle" src="assets/images/profile_small.jpg">
              <a dropdownToggle>
                <span class="block m-t-xs"> <strong class="font-bold">Loja</strong> </span>
                <span class="text-muted text-xs block">Cliente<b class="caret"></b> </span>
              </a>
              <ul class="animated fadeInRight dropdown-menu" *dropdownMenu>
                <li><a href="#">Perfil</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#">Mailbox</a></li>
                <li class="divider"></li>
                <li><a (click)="logout()">Sair</a></li>
              </ul>
            </div>
            <div class="logo-element">
              HUB
            </div>
          </li>
          <li [ngClass]="{active: activeRoute('starter')}" >
            <a [routerLink]="['/starterview']"><i class="fa fa-th-large"></i> <span class="nav-label">Menu 1</span></a>
            <ul class="nav nav-second-level collapse" [ngClass]="{in: activeRoute('starterview')}">
              <li><a>Cadastro Cliente</a></li>
              <li><a>Cadastro Mkt</a></li>
              <li><a>Dashboard v.5</a></li>
            </ul>
          </li>

          <li [ngClass]="{active: activeRoute('mktplace')}" *ngIf="nav.visible">
            <a [routerLink]="['/mktplace']"><i class="fa fa-th-large"></i> <span class="nav-label">Mkt Place</span></a>
            <ul class="nav nav-second-level collapse" [ngClass]="{in: activeRoute('mktplace')}">
              <li><a>Cadastro Produtos</a></li>
              <li><a>Pedidos</a></li>
              <li><a>Matchs de Produtos</a></li>
            </ul>
          </li>

          <li [ngClass]="{active: activeRoute('seller')}">
            <a [routerLink]="['/seller']"><i class="fa fa-th-large"></i> <span class="nav-label">Seller</span></a>
          </li>
        </ul>

      </div>
    </nav>

The user is fixed in the code yet, I am with the fixed data. Doing the validation by Authservice

@Injectable()
export class AuthService {    
  constructor(
    private router : Router
  ) { }

  fazerLogin(usuario: Usuario){
    if(usuario.nome === '[email protected]' && usuario.senha === '123456' && usuario.tipo === 'mktplace'){
      this.router.navigate(['usuario0']);
    }

    else if(usuario.nome === '[email protected]' && usuario.senha === '123456' && usuario.tipo === 'seller'){
      this.router.navigate(['usuario1']);
    }

    else if(usuario.nome === '[email protected]' && usuario.senha === '123456' && usuario.tipo === 'channel'){
      this.router.navigate(['usuario2']);
    }

    else{
      alert('Dados inválidos');
    }
  }
}

I mapped it this way:

  {
    path: '', component: BasicLayoutComponent,
    children: [
      {path: 'usuario1', component: PrimeiroComponent}
    ]
  },

  {
    path: '', component: BasicLayoutComponent,
    children: [
      {path: 'usuario2', component: SegundoComponent}
    ]
  },

  // App views
  {
    path: 'usuario0', component: BasicLayoutComponent,
    children: [
      {path: 'dashboard1', component: Dashboard1Component},
      {path: 'dashboard2', component: Dashboard2Component},
      {path: 'dashboard3', component: Dashboard3Component},
      {path: 'dashboard4', component: Dashboard4Component},
      {path: 'dashboard5', component: Dashboard5Component}
    ]
  },
  {
    path: 'dashboards', component: TopNavigationLayoutComponent,
    children: [
      {path: 'dashboard41', component: Dashboard41Component}
    ]
  },
  {
    path: '', component: BasicLayoutComponent,
    children: [
      {path: 'starterview', component: StarterViewComponent}
    ]
  },
  {
    path: '', component: BlankLayoutComponent,
    children: [
      { path: 'login', component: LoginComponent },
    ]
  },

  {path: '**',  redirectTo: 'starterview'}
  • The question is very broad CRAJ, because this type of control can be done only on the front, or on the back and in various ways. It is also necessary to know how the user is saved in the session.

  • See if you’ve improved friend, Grateful!

  • as @Lucascosta said, you can do it in several ways... the simplest is to do it on the same front... however you may need some extra validation in the route guard, to ensure that the user will not go to the system... now if it is only to hide even there is simpler... confirms if it is this way more simple

  • Would the additional validation be the verification if the user is still logged in? At first it would hide only, log check I have on another project, but hide the element not. If it’s the complete solution, it would be even better, if not, I’ll have a task force find out. I’m starting with Angular so I don’t know its paths yet, but I know it could be any number of ways..

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.