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<ProductComponent> {
canDeactivate(component: ProductComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | 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<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, '产品1');
} else {
this.router.navigate(['/home']);
return undefined;
}
}
}
上方的代码意思是。当请求页面的请求发送后。先经过这个resolve。如果传递的参数id是1 则认为正确 返回一个product对象并渲染到product组件中。如果id不是1 则认为是错误的请求 返回到首页上
@Injectable()修饰符是必须的。否则无法通过依赖获取到路由
implements Resolve<Product> 的意思是 我需要通过这个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验证请求参数并生成路由目标组件需要的数据-->路由到目标组件，目标组件获取到数据后渲染页面。
