Angular2使用Guard和Resolve进行验证和权限控制

exportinterface CanActivate {
 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}

{
 path: '',
 redirectTo: '/home',
 pathMatch: 'full'
}

import{ Observable }from'rxjs/Observable';
import'rxjs/add/observable/of';

@Injectable()
exportclassAuthService{
 account: Account;

// simulation to login.
 login(role: string): Observable<Account> {
letaccount =newAccount();
 account.id = 11;
 account.name = 'super man';
 account.roles = [role];
this.account = account;
returnObservable.of(account);
 }
 getAccount(): Account {
returnthis.account;
 }
 isLogdedin(): boolean {
returnthis.account &&this.account.id !=null;
 }
 hasRole(role: string): boolean {
returnthis.account &&this.account.roles.includes(role);
 }
}

exportconstTodoRoutes: Route[] = [
 {
 path: 'todo',
 children: [
 {
 path: 'list',
 component: TodoListComponent
 },
 {
 path: 'detail/:id',
 component: TodoDetailComponent
 }
 ]
 }
];

import{ Injectable }from'@angular/core';
import{ CanActivateChild, Router,
 ActivatedRouteSnapshot, RouterStateSnapshot } from'@angular/router';

import{ AuthService }from'../services/auth.service';
import{ TodoDetailComponent }from'./detail/detail.component';

@Injectable()
exportclassMyTodoGuardimplementsCanActivateChild{

constructor(private authService: AuthService, private router: Router) {}

 canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if(!this.authService.isLogdedin()) {
 alert('You need to login!');
this.router.navigate(['/home']);
returnfalse;
 }
if(this.authService.hasRole('CUSTOMER')) {
returntrue;
 }
returnfalse;
 }
}

@Injectable()
exportclassCanLeaveTodoDetailGuardimplementsCanDeactivate<TodoDetailComponent>{
 canDeactivate(component: TodoDetailComponent, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
returnconfirm('Confirm"htmlcode">

import{ Injectable }from'@angular/core';
import{ Resolve, ActivatedRouteSnapshot, RouterStateSnapshot }from'@angular/router';

import{ Todo }from'./todo';
import{ TodoService }from'./todo.service';

@Injectable()
exportclassMyTodoResolverimplementsResolve<Todo>{

constructor(private todoService: TodoService) { }

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
console.log('Get my todo list.');
returnthis.todoService.getAllTodos();
 }
}



在这个 resolve() 方法中，直接返回调用 todoService 的 getAllTodos() 方法的结果。对这个 getAllTodos() 方法我们做一些修改，让他返回一些测试数据：


import{ Observable }from'rxjs/Observable';
import'rxjs/add/observable/of';
import'rxjs/add/operator/delay';

// 神略中间的部分
 getAllTodos(): Observable<Todo[]> {
lettodo1 =newTodo();
 todo1.id = 1;
 todo1.title = 'test task 1';
 todo1.createdDate = newDate();
 todo1.complete = false;
lettodo2 =newTodo();
 todo2.id = 2;
 todo2.title = 'test task 2';
 todo2.createdDate = newDate();
 todo2.complete = false;

this.todos = [todo1, todo2];
returnObservable.of(this.todos).delay(3000);
 }



在这个方法里我们创建了2个测试的任务，封装成 Observable 返回，并添加了一个3秒钟的延时，来模拟从服务器端获取数据的过程。
通过 Resolve 方式获取的数据，会放在被激活的当前路由的 data 属性里面，我们可以在组件中来获得。所以，需要修改 TodoListComponent ，从路由的数据 data 中获取 todos 的值。然后就可以在页面中显示：


exportclassTodoListComponent{
 newTodo: Todo = newTodo();
 todos: Todo[];
constructor(private todoService: TodoService, private route: ActivatedRoute) {
this.todos =this.route.snapshot.data['todos'];
 }
// 省略其他
}



最终的todo模块路由配置
最后我们再看看加上上面的 Guard 和 Resolve 的路由配置以后，todo模块的路由配置：


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 来使用。只要路径上存在这个值，就说明需要权限。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。