[Angular实战网易云]——8、路由守卫--resolve

路由守卫

什么是路由守卫

字面理解，路由守卫就是保护路由的跳转。那为什么需要保护路由呢？实际场景中，会有很多不同的访问路径，分别控制不同的场景，就需要路由守卫。

• 该用户可能无权导航到目标组件。
• 可能用户得先登录（认证）。
• 在显示目标组件前，你可能得先获取某些数据。
• 在离开组件前，你可能要先保存修改。
• 你可能要询问用户：你是否要放弃本次更改，而不用保存它们？

而路由器也是可以应对这些不同的场景

• 用CanActivate来处理导航到某路由的情况。
• 用CanActivateChild来处理导航到某子路由的情况。
• 用CanDeactivate来处理从当前路由离开的情况.
• 用Resolve在路由激活之前获取路由数据。
• 用CanLoad来处理异步导航到某特性模块的情况。

---

resolve

这一节是使用了resolve预先获取组件数据

• 如果你在使用真实 api，很有可能数据返回有延迟，导致无法即时显示。 在这种情况下，直到数据到达前，显示一个空的组件不是最好的用户体验。
• 最好使用解析器预先从服务器上获取完数据，这样在路由激活的那一刻数据就准备好了。 还要在路由到此组件之前处理好错误。 但当某个 id 无法对应到一个危机详情时，就没办法处理它。 这时最好把用户带回到“危机列表”中，那里显示了所有有效的“危机”。
• 总之，你希望的是只有当所有必要数据都已经拿到之后，才渲染这个路由组件。

---

步骤

• 创建home-resolve.service.ts

在home路径下 ： ng g s home-resolve

• home-resolve.service.ts

import {
    Injectable } from '@angular/core';
import {
    Resolve } from '@angular/router';
import {
    forkJoin, Observable } from 'rxjs';
import {
    first }