web-dev-qa-db-fra.com

Comment rediriger vers un certain itinéraire en fonction de la condition dans Angular 2.

Je crée une application angular2-meteor.

export const routes: Route[] = [{
    path: '',
    redirectTo: "login",
    pathMatch: "full"
}, 
{
    path: 'login',
    component: LoginComponent
}, 
{
    path: 'csvtemplate',
    component: TemplateComponent,
    canActivate: ['canActivateForLoggedIn'],
    children: [{
        path: '',
        redirectTo: 'dashboard' <----how to add condition for multiple path
    }, 
    {
        path:'dashboard',
        component: DashboardComponent
    },
    {
        path: 'csvtimeline/:month/:year',
        component: CsvTimelineComponent
    }, {
        path: 'csvjson',
        component: CsvJsonComponent
    }]
}];

Lorsque je me connecte à mon application à l'aide de LoginComponent, elle ira à TemplateComponent qui a trois composants enfants

  • tableau de bord
  • csvtimeline
  • csvjson

Maintenant, j'ai par défaut défini redirectTo sur mon composant de tableau de bord. mais à la place de cette redirection, je veux rediriger vers le composant csvjson ou le composant csvtimeline en fonction du profil utilisateur de connexion.

Supposer

Si l'utilisateur de connexion est "Admin", il doit être redirigé vers -> Composant du tableau de bord

Si l'utilisateur de connexion est "Invité", il doit être redirigé vers -> composant csvjson

je sais que nous pouvons le faire dans ngOnInit () du composant de tableau de bord pour la redirection.

if (this.user && this.user.profile.role == 'Guest') {
             this._router.navigate(['csvtemplate/csvjson']);
        }

mais je cherche une meilleure option pour ne pas avoir à ouvrir le composant de tableau de bord à chaque fois et il ira directement au composant csvjson.

angularangular2-routingangular2-meteor
13
Amit kumar

Voici la meilleure solution Protégez la fonction d'administration selon Angular guide.
Utilisation du crochet CanActivate Étapes:

1) Ajoutez le fichier auth-guard.service.ts 

    import { Injectable }     from '@angular/core';
    import { CanActivate }    from '@angular/router';
    import { Router } from '@angular/router';

    @Injectable()
    export class AuthGuard implements CanActivate {
      canActivate() {
    //Your redirect logic/condition. I use this.

    if (this.user && this.user.profile.role == 'Guest') {
             this.router.navigate(['dashboard']);
        }
        console.log('AuthGuard#canActivate called');
        return true;
      }
//Constructor 
 constructor(private router: Router) { }
    }

2) Mettre à jour le fichier de routage, dans mon cas, son app.module.ts

import { AuthGuard } from './auth-guard.service';
import { AdminComponent } from './admin/admin.component';
@NgModule({
  declarations: [
    AppComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    RouterModule.forRoot([
        {
          path: 'admin',
          component: AdminComponent,
          canActivate:[AuthGuard]
        },
        {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
       }
    ])
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

** Référence ** https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

6
abdul hameed

Dans le module de routage, vous devez créer une variable locale "route", vérifier la condition et attribuer le chemin de routage requis à la variable et affecter la variable à rediriger vers le routage

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

var route: string = "user";
const role = JSON.parse(localStorage.getItem("currentUser")).roleId;

if (role == "1") {
//superadmin role
 route = "project"
} else {
  //normal user role
  route = "user"
}
const adminRoutes: Routes = [ {
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [

  { path: '', redirectTo: route },
  {
    path: 'project',
    loadChildren: './project-dashboard/project-dashboard.module#ProjectModule'
  }, {
    path: 'user',
    loadChildren: './user/user.module#UserModule',
  }
0
Fir