路由守卫

Posted 2020-10-23 大厨的笔记

路由守卫

路由守卫

CanActivate  | 处理导航到某路由的情况—阻止或允许用户进入组件

CanDeactivate  | 处理从当前路由离开的情况—用户离开时

Resolve  | 在路由激活之前获取路由数据—在组件绑定的属性还没有被赋值时会报错，这个守卫就是解决这个问题的

CanActivate

1.需要新建一个 XX.guard.ts 文件

2.在这个.ts 文件里导入 CanActivate 模块 ...

长这样：

canActivate(){}  这个方法 return true 用户就能正常加载这个路由组件，返回false 就被拦住了

3.在app.module.ts里导入这个模块

在providers：[] 注入模块

4.在app-routing.module.ts 导入这个模块

在你需要使用路由守卫的地方这样写：

 

CanDeactivate

1.需要新建一个 XX.guard.ts 文件

导入CanDeactivate 模块和要保护的模块

这个文件是这样写的：

箭头所指的就是需要保护的模块，canDeactivate 这个函数返回true表示同意离开，返回false表示不同意离开

2.在app.module.ts中导入刚刚创建的这个模块

注入到providers

3.在app-routing.module.ts 里导入创建的这个模块

在要保护的模块的路由的地方这样配置：

 

 

 

Resolve 

在进到组件之前，把这个组件需要的数据都获取到，当组件加载进来时直接就给页面绑定的数据赋值了

 1. 新建 stock.resolve.ts , 注意import 导入模块的路径，跟着注释走

2. 要使用这个守卫的模块的ts文件

导入组件

实例化组件

 

再写一个类（第二个导出的类）这个类接收两个参数（自定义参数的多少和类型）

声明一个 stock，指定类型为Stock;

在ngOnInit()函数里获取路由守卫获取到的值，并且赋值给本地变量stock

 

3.app.module.ts 里导入这个守卫

 

并且注入到providers里

 

在使用这个守卫的路由app.routing.module.ts里这样配置

 

4.根据传的值来决定守卫的动作