exportconstTodoRoutes: Route[] = [ { path: 'todo', canActivateChild: [MyTodoGuard], children: [ { path: 'list', component: TodoListComponent, resolve: { todos: MyTodoResolver } }, { path: 'detail/:id', component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] } ] } ];
我们在'todo'的路由上加了一个 canActivateChild 控制能否激活子路径, 在 list 的子路径上配置了一个 resolve 来获取数据，在 detail/:id 上配置了一个 canDeactivate 来控制能否离开。
最后，别忘了我们还需要在 todo 模块的定义 TodoModule 里面的 providers 里添加这些，这样依赖注入功能才能使用这些服务。
@NgModule({ imports: [CommonModule, FormsModule ], declarations: [TodoListComponent, TodoDetailComponent, TodoItemComponent], providers: [TodoService, MyTodoResolver, MyTodoGuard, CanLeaveTodoDetailGuard] }) exportclassTodoModule{}
通用的角色验证Guard
在上面的 MyTodoGuard 里面，我们判断当前的用户是否具有 CUSTOMER 角色，如果我们能够把这个需要判断的 CUSTOMER 角色通过一种方式来传递到这个方法里面，然后通过传递不同的参数，就可以用这个方法来判断进入任意页面的用户是否具有某个角色。我们可以使用Angular2路由里面的 data 属性来实现。
当我们定义一个路由时，可以通过 data 属性来给这个路由添加一些数据，如下：
exportconstTodoRoutes: Route[] = [ { path: 'todo', data: { role: 'CUSTOMER' }, canActivateChild: [MyTodoGuard], children: [ { path: 'list', component: TodoListComponent, resolve: { todos: MyTodoResolver }, data: { title: '列表' } }, { path: 'detail/:id', component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ], data: { title: '详情' } } ] } ];
我们给'todo'这个路由添加了1个变量，角色，我们可以在这个路由定义的组件以及它所有的子组件中的当前路由中得到这些数据。而且在子路由里，都添加了一个 title 的变量。然后在 TodoListComponent 里面就可以使用这个变量，比如在页面上显示。
exportclassTodoListComponent{ newTodo: Todo = newTodo(); todos: Todo[]; title: string; constructor(private todoService: TodoService, private route: ActivatedRoute) { this.todos =this.route.snapshot.data['todos']; this.title =this.route.data['title']; } // 省略其他 }
我们可以通过这种方式，在每个路由上配置title属性，然后就可以用一种通用的方式来实现在页面上显示面包屑导航栏的功能。
但是，在这个实例中，我们要用 data 上添加的 role: 'CUSTOMER' ，用它来表示当前的这个路径，需要有 CUSTOMER 角色的用户才能访问。然后在 MyTodoGuard 里用它来判断：
@Injectable() exportclassMyTodoGuardimplementsCanActivateChild{ canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if(!this.authService.isLogdedin()) { alert('You need to login!'); this.router.navigate(['/home']); returnfalse; } letrequiredRole = next.data['role']; if(requiredRole ==null||this.authService.hasRole(requiredRole)) { returntrue; } returnfalse; } }
在这里，我们从将要激活的路由的数据里面得到 role ，然后判断当前用户是否具有这个角色。这样，我们的这个 MyTodoGuard ，可以把它定义在根路径上，就可以作为一个通用的用户权限验证的 Guard 来使用。只要路径上存在这个值，就说明需要权限。