6、angular学习第五天（路由守卫）

1、路由守卫

路由守卫的意义是为了在进入路由或者离开路由的时候，允许判断当前用户是否有权限或者有未完成的操作。用于控制路由的整个调用过程。类似于app开发中的导航前的判断。

路由守卫的两种方式：
提供两个路由守卫的接口
canActivate ->是否能够调用当前路由
canDeactivate->是否可以离开当前路由

路由守卫的使用：
在app-routing.module.ts中配置路由守卫

{path: 'product/:id', component: ProductComponent, children: [
      {path: '', redirectTo: 'desc', pathMatch: 'full'},
      {path: 'desc', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerInfoComponent}
  ], canActivate: [LoginGuard], canDeactivate: [UnsaveGuard]},

创建两个路由守卫的实现类
login.guard.ts

import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

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

unsave.guard.ts

import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot} from '@angular/router';
import {ProductComponent} from '../product/product.component';
import {Observable} from 'rxjs';

export class UnsaveGuard implements CanDeactivate {
  canDeactivate(component: ProductComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable | Promise | boolean {
    return window.confirm('没有保存，要离开吗？');
  }
}

在app-routing.module.ts注入两个路由守卫的实现

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsaveGuard]
})

再次去调用页面的路由。就可以实现了路由守卫

2、resolve守卫

resolve是为了在组件需要异步请求网络数据的时候。如果直接显示组件那是用了{{}}这种插值表达式语法的变量都是无法显示的。造成不好的用户体验。为了在组件确定获取到数据之后在显示组件。就要使用resovle守卫

使用方式。实现Resovle接口

创建一个实体类对象product

export class Product {
  constructor(public productId: number, public productName: string) {
  }

}

创建一个resolve守卫
product.resovle.ts 并实现resovle接口

import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Product} from '../model/product';
import {Observable} from 'rxjs';
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, '产品1');
    } else {
      this.router.navigate(['/home']);
      return undefined;
    }
  }

}

上方的代码意思是。当请求页面的请求发送后。先经过这个resolve。如果传递的参数id是1 则认为正确返回一个product对象并渲染到product组件中。如果id不是1 则认为是错误的请求返回到首页上

@Injectable()修饰符是必须的。否则无法通过依赖获取到路由
implements Resolve 的意思是我需要通过这个resovle守卫获取到一个Product类型的对象

配置路由app-routing.module.ts中

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

并在app-routing.module.ts中声明ProductResolve

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsaveGuard, ProductResolve]
})

这最后在product.component.ts中获取到resovle中提供的数据

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Data, Params} from '@angular/router';
import {Product} from './model/product';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  public productId: number;
  public productName: string;
  constructor(private routerInfo: ActivatedRoute ) { }

  ngOnInit() {

    this.routerInfo.data.subscribe( (data: {product: Product}) => {
      this.productId = data.product.productId;
      this.productName = data.product.productName;
    });

  }

}

这样下来整个获取数据的流程就是

页面发起路由请求--->ProductResovle验证请求参数并生成路由目标组件需要的数据-->路由到目标组件，目标组件获取到数据后渲染页面。

6、angular学习第五天（路由守卫）

你可能感兴趣的:(6、angular学习第五天（路由守卫）)