Как получить доступ к параметрам маршрута в пункте защиты маршрута в Angular 7?

У меня есть приложение Angular 7, в котором у меня есть такой маршрут

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

Теперь я попытался получить доступ к params этого маршрута в route-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;
    }
}

Но это дает эту ошибку

введите здесь описание изображения

Что я делаю неправильно?


typescript angular angular-routing angular-route-guards
person Fahad Hassan    schedule 24.02.2020    source источник
comment
Опечатка: это охрана, а не охрана ....   -  person marc_s    schedule 24.02.2020

Ответы (1)


arrow_upward
4
arrow_downward

canActivate принимает ActivatedRouteSnapshot в качестве первого параметра, поэтому добавьте его в свою функцию.

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

    // the rest of the implementation
  }
}

CanActivate интерфейс из документации

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

РЕДАКТИРОВАТЬ

Если вы хотите сделать HTTP-запрос внутри своей защиты, вместо этого вы возвращаете 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)
    );
  }
}
person Kurt Hamilton    schedule 24.02.2020
comment
когда я использую RouterStateSnapshot, он выдает такую ​​ошибку NullInjectorError: No provider for ActivatedRouteSnapshot! - person Fahad Hassan; 25.02.2020
comment
Вы импортировали модуль маршрутизации? - person Kurt Hamilton; 25.02.2020
comment
да, я импортировал RouterModule в свой app.module.ts и получаю эту ошибку ibb.co/pJkCDr8 - person Fahad Hassan; 25.02.2020
comment
Снимок состояния маршрутизатора не требуется, если вы просто хотите получить параметры. - person Kurt Hamilton; 25.02.2020
comment
Я не понял твою точку зрения. Когда я использовал ActivatedRoute, вы сказали, что canActivate использует только ActivatedRouteSnapshot, теперь вы говорите, что вам не нужно это использовать? что ты хочешь сказать? пожалуйста, поясните в своем ответе - person Fahad Hassan; 25.02.2020
comment
Мой ответ ясно показывает, как получить параметры из функции canActivate. Используйте эту подпись: canActivate(route: ActivatedRouteSnapshot): boolean - person Kurt Hamilton; 25.02.2020
comment
Я добавил полный интерфейс, чтобы показать, откуда он - person Kurt Hamilton; 25.02.2020
comment
И я говорю вам то же самое, что я использую именно ваш метод и получаю ошибку, ссылка на которую отправлена ​​выше. - person Fahad Hassan; 25.02.2020
comment
Вы пытаетесь ввести его в конструктор? Поскольку canActivate - это функция - person Kurt Hamilton; 25.02.2020
comment
Вы применили его не так, как было сказано в моем ответе. route: ActivatedRouteSnapshot - первый аргумент в canActivate - person Kurt Hamilton; 25.02.2020
comment
Могу ли я сделать http-вызов внутри моего Route Guard? - person Fahad Hassan; 25.02.2020
comment
да. Добавлю к своему ответу - person Kurt Hamilton; 25.02.2020
comment
ответьте, пожалуйста, на мой вопрос stackoverflow.com/questions/60402486/ - person Fahad Hassan; 25.02.2020
comment
Выполнено. На самом деле это немного сложнее, чем мое обновление здесь, поэтому стоит другой ответ - person Kurt Hamilton; 25.02.2020