Angular—路由守卫

路由守卫的用处

1. 需要用户登录或拥有某些权限的时候才能进入路由，就可以利用路由做一些限制
2. 用户只有在当前路由填写了满足要求的信息才可以导航到下一个路由的情况。
3. 当用户没有保存，就想离开当前路由的时候，就可以提醒用户。

三种路由守卫

CanAcitivate：处理导航到某路由的情况。
CanDeactivate：处理从当前路由离开的情况。
Resolve：在跳转到指定路由之前，提前获取路由所需的数据。
下面看一下它们的用法：

1. CanAcitivate
（1）首先建立一个文件夹，名为guard，然后在里面建一个 ts 文件，名为login.guard.ts
（2）写一个 LoginGuard 类，让它实现 CanActivate 接口，并实现接口里的方法，在方法中写上限定的条件

（3）然后需要配置一下路由，就可以了

2. CanDeactivate
（1）首先也需要建立一个 ts 文件，建立一个类UnsavedGuard,让它实现CanDeactivate接口，不过这个接口需要一个泛型，此泛型就是当前的组件

（2）路由配置同上

3. Resolve守卫
此守卫的作用是：在进入一个路由之前，先通过该守卫获取到路由所需的数据，获取到数据之后，再向用户展示页面。之所以这样做是因为，有可能在加载数据的过程中有延迟，如果先向用户展示页面，再加载数据，给用户带来的体验不好；还可以解决的一种情况就是，如果因为某些原因获取不到需要的数据，就可以导向错误页等。
（1）先建立一个 Resolve 守卫，让其实现Resolve接口，此接口也需要一个泛型，这个泛型就是获取的数据类型

（2）配置路由信息

（3）页面获取守卫返回的数据

Resolve守卫的过程是：当进入一个路由之前，先通过该守卫获取此路由所需的数据，获取到之后将数据返回，最后由此路由接收守卫获取到的数据。