(八)、Angular4.0 路由守卫

秒速五厘米 2022-05-28 01:45 259阅读 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<ProductComponent> {
    
      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<Product> {
    
      constructor(private router: Router) {
    
      }
    
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product> | Promise<Product> | 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的值**

<p>
        商品名称 ： {
       {productName}}
      </p>

**十四、在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的跳转到主页**