如何根据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.
假设
如果登录用户为管理员",则应将其重定向到->仪表板组件
如果登录用户是访客",则应将他重定向到-> 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屋!