How to Redirect to a certain route based on condition in Angular 2.

后端 未结 2 1849
别跟我提以往
别跟我提以往 2021-01-01 16:17

I am creating one angular2-meteor app.

export const routes: Route[] = [{
    path: \'\',
    redirectTo: \"login\",
    pathMatch: \"full\"
}, 
{
    path:          


        
相关标签:
2条回答
  • 2021-01-01 16:59

    In routing module, u need to create local variable "route",check condition and assign requires routing path the variable and assign variable to redirectTo in routing

    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 讨论(0)
  • 2021-01-01 17:09

    Here is the better solution: Guard the admin feature according to Angular guide.
    Using CanActivate hook Steps:

    1) Add auth-guard.service.ts file

    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) Update the routing file, in my case it's 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 { }
    

    **Reference ** https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

    0 讨论(0)
提交回复
热议问题