如何根据 Angular 2 中的条件重定向到某个路由. [英] How to Redirect to a certain route based on condition in Angular 2.

问题描述

我正在创建一个 angular2-meteor 应用程序.

I am creating one angular2-meteor app.

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
    }]
}];

当我使用 LoginComponent 登录我的应用程序时，它将转到具有三个子组件的 TemplateComponent

When i login to my app using LoginComponent it will go to TemplateComponent which have three child components

• 仪表板
• csvtimeline
• csvjson

现在我默认将 redirectTo 设置为我的仪表板组件.但代替此重定向，我想根据登录用户配置文件重定向到 csvjson 组件或 csvtimeline 组件.

Now i have by default set redirectTo to my dashboard component. but in place of this redirect i want to redirect to csvjson component or csvtimeline component based on login user profile.

假设

如果登录用户是管理员"，他应该重定向到 - > 仪表板组件

如果登录用户是Guest"，那么他应该是redirectTo - > csvjson 组件

我知道我们可以在用于重定向的仪表板组件的 ngOnInit() 中执行此操作.

i know we can do this in ngOnInit() of dashboard component for redirect.

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

但我正在寻找更好的选择，所以我不必每次都打开仪表板组件，它会直接转到 csvjson 组件.

but i am looking for better option so i don't have to open dashboard component each time and it will directly go to csvjson component.

推荐答案

这是更好的解决方案:根据 Angular 指南保护管理功能.
使用 CanActivate 钩子步骤:

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

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) 更新路由文件，在我的例子中是 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 { }

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

这篇关于如何根据 Angular 2 中的条件重定向到某个路由.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！