0

Desejo obter informações como o menu para uma rota diferente, por exemplo, o cliente "Mkt Place" não é visto como opções de clientes "Vendedor", fornecidas pelo menu quando o usuário digitar o login no 'mktplace' ou 'vendedor "dependendo da escolha

<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>

O usuário este fixado no código ainda, estou com os dados fixos. Fazendo a validação pelo 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');
    }
  }
}

Mapeei desta forma:

  {
    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'}
4
  • A pergunta é muito ampla CRAJ, porque esse tipo de controle pode ser feito somente no front, ou no back e de diversas formas. Também é necessário saber a forma que o usuario é salvo na sessão.
    – BrTkCa
    Commented 19/12/2017 às 12:39
  • Veja se melhorou amigo, Grato!
    – CRAJ
    Commented 19/12/2017 às 12:48
  • como o @LucasCosta disse, dá pra fazer de varias maneiras... a mais simples é fazer no front mesmo... entretanto talvez vc precise de alguma validação a mais no guarda de rota, pra garantir que o usuário não vai bular o sistema... agora se for só esconder mesmo ai é mais simples... confirma se é dessa forma mais simples
    – picossi
    Commented 19/12/2017 às 12:57
  • A validação a mais seria a verificação se o usuário ainda esta logado? A princípio seria esconder apenas, a verificação de logado tenho em outro projeto, mas ocultar o elemento não. Se for a solução completa seria melhor ainda, caso não, faço uma força tarefa para descobrir. Estou iniciando com Angular por isso ainda não conheço seus caminhos, mas sei que podem ser várias formas..
    – CRAJ
    Commented 19/12/2017 às 13:36

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .