如何传递参数给守卫？

Question

我有基于项目的 angular 12.

我需要根据收集令牌的参数保护路由：

 export const authenticationRoutes = [
  {
    path: 'reset-password/token/:token',
    component: ResetPasswordShellComponent,
    canActivate: [ResetPasswordGuard]
  }
];

ResetPasswordGuard 是调用 Web 服务的守卫，应该发送作为路径一部分的令牌值：

path: 'reset-password/token/:token'

我的问题是有什么方法可以将令牌值从路径传递到 guard(ResetPasswordGuard)，以便将其发送到 Web 服务？

Answer 1

当我们在 ResetPasswordGuard 上实现接口 CanActiavte 时，函数 canActivate 有 2 个参数，第一个是 ActivatedRouteSnapshot...

canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        // your  logic goes here
        console.log('[ResetPasswordGuard]', next.params); // <-- This should print {token: 'somevalue'}
        ....
        ....
    }

因此可以使用...从中轻松读取路径参数...

const tokenInPath = next.params.token || ''

使用 ActivatedRouteSnapshot 可以访问 URL 中的全部数据。 ActivatedRouteSnapshot 还为 reading/receiving 预期信息（路径参数、查询参数等...）提供了 Observable 接口。

---

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET