如何在 Angular 7 中访问路由保护子句中的路由参数？

Question

我有一个 Angular 7 应用程序，其中有这样一条路线

{ path : 'forgot-password/:resetHash/:email', 
  component : ForgotPasswordComponent, 
  canActivate : [ForgotPasswordPageGuard]},

现在我试图在 route-guard 中访问此路由的 params 但我没有在 guard 中获取路由参数。这是我的 forgotpassword.route.guard.ts

constructor(private _utilityService: UtilitySerivce, private _dataService: DataService, private _const: Constants, private _router: ActivatedRouteSnapshot) {
}

canActivate = (): boolean => {
    console.log('in link expiry guard')
    let userEmail = this._router.paramMap.get('email');
    let isAllow = false;

    console.log('params : ', userEmail)
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);
    console.log('user email : ', userEmail)
    this._dataService.post(this._const.userResetPasswordLinkExpiry, { email: userEmail }).subscribe(resp => {
        if (resp.success) {
            isAllow = true;
        } else {
            isAllow = false;
        }
    })
    if (isAllow) {
        return true;
    } else {
        this._utilityService.navigate('/login');
        this._dataService.exhangeResetPasswordObsMsg({ event: 'linkExpired' });
        return false;
    }
}

但是它给出了这个错误

我做错了什么？

Answer 1

canActivate 将 ActivatedRouteSnapshot 作为其第一个参数，因此将其添加到您的函数中。

export class MyGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean => {
    const email = route.paramMap.get('email');

    // the rest of the implementation
  }
}

CanActivate 界面来自 the docs

interface CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
    Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

编辑

如果你想在你的守卫内部发出一个 HTTP 请求，你 return Observable<boolean> 就可以了。你可以从界面上看到这是允许的。

export class MyGuard implements CanActivate {
  constructor(private http: HttpClient) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> => {
    const email = route.paramMap.get('email');

    return this.http.get('some url').pipe(
      // map response to some boolean value that determines the permission
      map((response): boolean => true)
    );
  }
}

如何在 Angular 7 中访问路由保护子句中的路由参数？

How to access route params in route guard clause in Angular 7?

typescript

angular-routing

angular

angular-route-guards