路由守卫

课程：官方教程 状态：done

路由守卫主要解决以下的问题：

• 对于用户访问页面的权限校验（是否已经登录？是否有权限进入？）
• 离开页面时，提示用户是否保存未提交的修改
• 在跳转到组件前获取某些必须的数据

Angular 路由模块提供了接口帮助解决上面的问题：

• CanActivate：认证授权
  • 先判断是否login，否跳转到login页面
  • 在判断是否有role，
• CanActivateChild：功能同 CanActivate，针对的是子路由
• CanDeactivate：用来处理从当前路由离开的情况
  • 判断是否修改了原始数据，能否直接离开
• CanLoad：异步导航特性模块,是否允许通过懒加载的方式加载某个模块（已经被canMatch替代）
  • role和url同时满足时可load
• Resolve，如果响应时间够长，就需要预先从服务器上获取数据，路由激活瞬间数据渲染完毕，此处需要Resolve守卫

路由守卫在哪里生效：

app-routing.module.js

const routes: Routes = [
  {
    path: 'legalReserves',
    // 这里，[AuthGuard]的取值有true/false，true代表可以访问，false代表拒绝访问
    canActivate: [AuthGuard],
    //loadComponent 实现组件的懒加载
    //loadChildren 实现模块的懒加载，使用动态路由，也有字符串方法
    loadChildren: () =>
      import('./pages/legal-reserves/legal-reserves.module').then(
        (m) => m.LegalReservesModule
      )
  },
  {
    path: 'access-denied',
    component: AccessDeniedComponent
  }，
  { 
    path: '', 
    redirectTo: 'legalReserves', 
    pathMatch: 'full' 
  }
];

canMatch和canActivate的区别

• 是否加载懒加载的js文件
  • canMatch:false，canActivate：true，不加载文件
  • canMatch:true，canActivate：false，加载文件
• 不通过的情况
  • canMatch：跳过，匹配下一个路由
  • canActivate：取消导航/保留在原地

---

预加载

因为懒加载的特性，加载资源时会有短暂的白屏。 所以我们可以使用预加载策略，当满足这个策略的条件时，就去加载对应路由的资源。 实现 PreloadingStrategy 的 preload 方法。

懒加载

当导航到这个 /legalReserves 路由时，框架会通过 loadChildren 字符串来动态加载 LegalReservesModule，然后把 LegalReservesModule 添加到当前的路由配置中，而惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时执行，在后续请求时，该模块和路由都是立即可用的。

重定向

这里的 path: '' 表示使用初始的相对 URL（ '' ）。

通配符路由

通配符路由是最后一个路由，因为它匹配所有的 URL。

app-routing.module.js

// 路由匹配的原则时先到先得
const routes: Routes = [
  { 
    // 重定向
    // 映射成 `/` 路径
    path: '', 
    redirectTo: 'legalReserves', 
    pathMatch: 'full' //path严格满足
    // 若pathMatch：'prefix'，会死循环造成页面上空白，因为''是所有路径的prefix
    // prefix满足分段或一部分就好
  },
  {
    path: 'legalReserves',
    data: {
        // 预加载，只加载为true的路由
        preloading: true,
    },
    resolve:{
      //resolve是一个对象
      hero: HeroResolver
      // 声明一个HeroResolver类实现resolve方法 
    },
    // title,添加标签页标题
    component: AccessDeniedComponent
  }，
  {
    // 通配符路由
    path: '**',
    component: AccessDeniedComponent
  }
];

注：

• 路由渲染组件的逻辑
• 路由的生命周期
  • 匹配，CanMatch
  • 守卫，CanDeactivate-CanActive
  • 解析，Resolve

---

link：www.cnblogs.com/danvic712/p… www.yuanqiao.pw/m/?post=143