(八)、Angular4.0 路由守卫

一、路由守卫作用

1. 只有当用户已经登录并拥有某些权限时才能进入某路由。
2. 一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。
3. 当用户未执行保存操作而试图离开当前导航时提醒用户。

二、路由守卫的种类

1. CanActivate：处理导航到某路由的情况。
2. CanDeactivate：处理从当前路由离开的情况。
3. Resolve：在路由激活之前获取路由数据。

三、在 src/app 下新建一个目录 guard ,在目录里新建一个login.guard.ts的TypeScript文件，实现登录守卫CanActivate

四、login.guard.tx.ts 当随机数小于0.5时返回true

import {CanActivate} from '@angular/router';export class LoginGuard implements CanActivate {canActivate() {const loggedIn: boolean = Math.random() < 0.5;if (!loggedIn) {console.log('用户未登录');}return loggedIn;}
}

五、把LoginGuard配置到主路由app-routing.module.ts中

        商品详情路由添加canActivate属性，把LoginGuard配置进去，同时

        也在@NgModule中的providers属性加上LoginGuard

const routes: Routes = [{path: '', redirectTo: '/home', pathMatch: 'full'},{path: 'chat', component: ChatComponent, outlet: 'aux'},{path: 'home', component: HomeComponent},{path: 'product/:id', component: ProductComponent, children:[{path: '', component: ProductDescComponent},{path: 'seller/:id', component: SellerInfoComponent}], canActivate: [LoginGuard]},{path: '**', component: Code404Component}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers: [LoginGuard]
})
export class AppRoutingModule { }

六、启动项目 访问localhost:4200 点击商品详情链接，当随机数小于0.5时才能进入商品详情的路由，展示商品详情页面

七、在guard目录下新建一个unsaved.guard.ts文件，用于离开路由的守卫CanDeativate

八、unsaved.guard.ts   实现 CanDeactivate ，泛型类型是需要守卫的路由

export class UnsavedGuard implements CanDeactivate {canDeactivate(component: ProductComponent) {return window.confirm('确定离开吗？');}}

九、在 app-routing.module.ts 的product路由上添加canDeactivate属性，把UnsavedGuard配置进去，同时也在@NgModule的providers添加UnsavedGuard

  {path: 'product/:id', component: ProductComponent, children:[{path: '', component: ProductDescComponent},{path: 'seller/:id', component: SellerInfoComponent}], canActivate: [LoginGuard], canDeactivate: [UnsavedGuard]}

providers: [LoginGuard, UnsavedGuard]

十、启动项目，测试离开商品详情页

十一、resolve守卫 product.resolve.ts

import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Product} from '../product/product.component';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';@Injectable()
export class ProductResolve implements Resolve {constructor(private router: Router) {}resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | Product {const productId: number = route.params['id'];if (productId == 1) {return new Product(1, 'iphone7');} else {this.router.navigate(['/home']);}return undefined;}}

十二、在product.component.ts中创建一个Product对象，在ProductComponent新增一条productName属性来接收参数

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';@Component({selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {private productId: number;private productName: string;constructor(private routeInfo: ActivatedRoute) { }ngOnInit() {this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);this.routeInfo.data.subscribe((data: {product: Product}) => {this.productId = data.product.id;this.productName = data.product.name;});}
}export class Product {constructor(public id: number, public name: string) {}
}

十三、在product.component.html中新增一个p标签展示productName的值

  
商品名称 ： {{productName}}

十四、在app-routing.module.ts配置resolve守卫(便于测试，把canActivate,canDeactivate删除)

  {path: 'product/:id', component: ProductComponent, children: [{path: '', component: ProductDescComponent},{path: 'seller/:id', component: SellerInfoComponent}], resolve: {product: ProductResolve}}

providers: [LoginGuard, UnsavedGuard, ProductResolve]

十五、启动项目，点击商品详情链接正常显示，点击商品详情按钮跳转到主页，因为url上传递的参数不同，id不为1的跳转到主页

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！