路由守卫都有哪些以及都做过哪些事情，三个参数分别是干什么的

前端l
118 阅读6分钟

路由守卫都有哪些以及都做过哪些事情，三个参数分别是干什么的

在使用 Angular 开发应用时，路由守卫是一个非常重要的概念。路由守卫可以帮助我们实现一些安全性和权限控制方面的功能，使得我们的应用更加稳定、安全和可靠。本文将介绍路由守卫的种类，以及它们都做过哪些事情，同时还会详细讲解每个守卫的三个参数分别是干什么的。

一、路由守卫的种类

在 Angular 中，路由守卫有四种种类，它们分别是：

  1. CanActivate：用于检查用户是否具有进入某个路由的权限。
  2. CanActivateChild：用于检查用户是否具有进入子路由的权限。
  3. CanDeactivate：用于检查用户是否可以离开当前路由。
  4. Resolve：用于在路由激活之前获取异步数据。

二、路由守卫都做过哪些事情

1. CanActivate

CanActivate 守卫用于检查用户是否有进入某个路由的权限。当用户试图进入一个受保护的路由时，Angular 会执行 CanActivate 方法。如果该方法返回 true，则用户将被允许进入该路由。如果该方法返回 false，则用户将被重定向到其他页面或者显示一个错误信息。

CanActivate 守卫常用于检查用户登录状态或者权限等信息，例如：

  • 检查用户是否已经登录，如果没有登录，则跳转到登录页面。
  • 检查用户的角色是否具有权限，如果没有权限，则跳转到其他页面或者显示一个错误信息。

2. CanActivateChild

CanActivateChild 守卫用于检查用户是否有进入某个子路由的权限。当用户试图进入一个受保护的子路由时，Angular 会执行 CanActivateChild 方法。如果该方法返回 true，则用户将被允许进入该子路由。如果该方法返回 false，则用户将被重定向到其他页面或者显示一个错误信息。

CanActivateChild 守卫常用于检查用户登录状态或者权限等信息，例如：

  • 检查用户是否已经登录，如果没有登录，则跳转到登录页面。
  • 检查用户的角色是否具有权限，如果没有权限，则跳转到其他页面或者显示一个错误信息。

3. CanDeactivate

CanDeactivate 守卫用于检查用户是否可以离开当前路由。当用户试图离开当前路由时（例如点击浏览器后退按钮、导航到其他路由等），Angular 会执行 CanDeactivate 方法。如果该方法返回 true，则用户将被允许离开当前路由。如果该方法返回 false，则用户将不能离开当前路由。

CanDeactivate 守卫常用于检查表单是否已经保存，如果表单未保存，则提示用户是否保存数据。

4. Resolve

Resolve 守卫用于在路由激活之前获取异步数据，并在路由激活后传递给组件。当用户进入一个带有 resolve 的路由时，Angular 会执行 resolve 方法获取异步数据。如果获取数据成功，则用户将被允许进入该路由并且数据会被传递给组件。如果获取数据失败，则用户将被重定向到其他页面或者显示一个错误信息。

Resolve 守卫常用于获取一些必要的数据，例如：

  • 获取用户信息，用于在用户进入某个页面时展示用户信息。
  • 获取产品列表，用于在用户进入某个页面时展示产品列表。

三、每个守卫的三个参数分别是干什么的

无论哪种路由守卫，都有三个参数，它们分别是：

  1. route：表示当前要进入的路由。
  2. state：表示当前应用的状态。
  3. routerState：表示当前路由器的状态。

下面分别介绍每个参数的作用。

1. route

route 参数表示当前要进入的路由。我们可以通过该参数获取路由的各种信息，例如路由的路径、数据等。以下是一些常用的 route 属性：

  • route.path：表示当前路由的路径。
  • route.data：表示当前路由的数据。
  • route.params：表示当前路由的参数。

举个例子，假设我们有一个路由配置如下：

typescript复制代码
{
  path: 'product/:id',
  component: ProductComponent,
  data: {
    title: 'Product details'
  }
}

当用户进入 /product/123 路径时，route 对象的属性值如下：

  • route.path 的值为 product/:id。
  • route.data 的值为 { title: 'Product details' }。
  • route.params 的值为 { id: '123' }。

我们可以利用这些属性值做一些权限控制和数据获取等操作。

2. state

state 参数表示当前应用的状态。我们可以通过该参数获取应用的各种信息，例如应用的 URL、路由是否懒加载等。以下是一些常用的 state 属性：

  • state.url：表示当前应用的 URL。
  • state.root：表示当前应用的根路由。
  • state.children：表示当前路由下的子路由。

举个例子，假设我们有一个路由配置如下：

typescript复制代码
{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: 'product',
      loadChildren: () => import('./product/product.module').then(m => m.ProductModule)
    }
  ]
}

当用户进入 /product 路径时，state 对象的属性值如下：

  • state.url 的值为 /product。
  • state.root 的值为根路由。
  • state.children 的值为 { path: 'product', loadChildren: ... }。

我们可以利用这些属性值做一些权限控制和数据获取等操作。

3. routerState

routerState 参数表示当前路由器的状态。我们可以通过该参数获取路由器的各种信息，例如路由器中已经激活的路由、路由器中还未激活的路由等。以下是一些常用的 routerState 属性：

  • routerState.snapshot.url：表示当前路由器的 URL。
  • routerState.snapshot.root：表示当前路由器的根路由。
  • routerState.snapshot.children：表示当前路由器中的子路由。

举个例子，假设我们有一个路由配置如下：

typescript复制代码
{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: 'product',
      loadChildren: () => import('./product/product.module').then(m => m.ProductModule)
    }
  ]
}

当用户进入 /product 路径时，routerState 对象的属性值如下：

  • routerState.snapshot.url 的值为 /product。
  • routerState.snapshot.root 的值为根路由。
  • routerState.snapshot.children 的值为 { path: 'product', loadChildren: ... }。

我们可以利用这些属性值做一些权限控制和数据获取等操作。

四、总结

本文介绍了 Angular 中路由守卫的种类、每个守卫都做过哪些事情，以及每个守卫的三个参数分别是干什么的。路由守卫是 Angular 中非常重要的一个概念，通过使用路由守卫，我们可以实现一些安全性和权限控制方面的功能，使得应用更加稳定、安全和可靠。在开发应用时，我们需要根据需求选择不同的路由守卫，并合理利用每个守卫的三个参数，以实现更加灵活和强大的功能。

avatar
文章
阅读
粉丝