Angular路由(7)--路由守卫

所谓路由守卫指的就是防止路由自由进出的功能，分进和出3种情况。

1. CanActivate 处理导航进入到某路由的情况。防止随意进入。

使用方法：

首先建立一个类，继承一个CanActivate，在实现方法CanActivate方法中做逻辑计算，返回true false，当真时允许进入路由通过，否者拒绝。

import { Routes, RouterModule } from '@angular/router';
export class LoginGuard implements CanActivate{
  canActivate(){
    let can: boolean = true;
    return can;
  }
}

再在路由配置中添加CanActivate属性, 可以同时配置多个守卫。这里只写了一个登录守卫

{path: `product/:id`, component: ProductComponent, canActivate: [LoginGuard]},

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

 

2. CanDeactivate 处理当前路由想离开时的情况。想离开时先经过我同意。

使用方法：

首先建立一个类，继承一个CanDeactivate，在泛型参数中写上哪个路由守卫的组建，在实现方法CanActivate方法中做逻辑计算，返回true false，当真时允许离开当前路由通过，否者拒绝。比如当前页面为保存信息，有一个提示不保存就离开吗?

import { Routes, RouterModule } from '@angular/router';
export class LoginGuard implements CanDeactivate<ProductComponent>{
  canDeactivate(mycomponent: ProductComponent){
    return window.comfirm("还没有保存，你确定要离开吗?");
  }
}

剩下的跟第一种情况一样，路由配置中属性变成CanDeactivate 就好。

3. Resolve 在路由激活之前获取路由数据。

    这个守卫主要解决进入某个页面后，页面所需要的数据还没有，所以在进入前先拿数据，数据拿到后再进入路由，能显示完整页面数据。