Приложение Angular 6 для чтения параметров из внешнего вызывающего приложения

Question

У нас есть портал, который представляет собой неугловое приложение.Портал перенаправляет в мое приложение Angular 6 по ссылке.При перенаправлении он отправит токен JWT в качестве параметра.Теперь у меня проблемы с тем, что я хочу прочитать этот токен и отправить его в бэкэнд-сервис API для аутентификации, чтобы соответствующие страницы отображались авторизованным пользователям.Как я могу прочитать этот токен в моем угловом 6?

Answer 1

Я реализовал тот же подход, проверив токен в CanActivate в authguard, вы можете проверить доступ к этому токену, а затем разрешить пользователю переходить к маршруту или нет Вот пример:

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  let accesstoken: string = next.queryParams.accesstoken;
  if (this.authService.IsAuthenticated) {
    let user = this.authService.GetUser();
    let CurrentDate = new Date();
    let date = CurrentDate.getFullYear() + "-" + (CurrentDate.getMonth() + 1) + "-" + CurrentDate.getDate();
    if (Date.parse(date) <= Date.parse(user.expire_date)) {
      if (accesstoken) {
        // if token in url, redirect to url without token :)
        if (user.uuid == accesstoken)
          this.router.navigateByUrl(window.location.pathname);
        // if new token is not the same of current one, Register with new token
        else {
          return this.authService.checkAccess(accesstoken).pipe(
            map(data => {
              if (data === true) {
                if (accesstoken) {
                  this.router.navigateByUrl(window.location.pathname);
                }
                return true;
              } else {
                this.router.navigate(['/login']);
                return false;
              }

            })
          );
        }
      }
      return true;
    }
    else if (Date.parse(date) > Date.parse(user.expire_date)) {
      return this.authService.checkAccess(accesstoken).pipe(
        map(data => {
          if (data === true) {
            if (accesstoken) {
              this.router.navigateByUrl(window.location.pathname);
            }
            return true;
          } else {
            this.router.navigate(['/login']);
            return false;
          }

        })
      );
    }

  } // End of authenticated with check validty
  else if (!NOU(accesstoken)) { // In case current registered token is not valid, CheckAccess with new token
    this.authService.checkAccess(accesstoken).subscribe(
      data => {
        if (data === true) {
          if (accesstoken) {
            this.router.navigateByUrl(window.location.pathname);
          }
          return true;
        } else {
          this.router.navigate(['/login']);
          return false;
        }
      },
      error => {
      }
    );
  }
  else {
    this.router.navigate(['/login']);
    return false;
  }

} 

при условии, что при успешном входе в систему вы сохраняете token и expire_date в localstorage и задаете для свойства IsAuthenticated значение true Поэтому сначала проверьте, аутентифицирован ли уже пользователь, затем проверьте правильность, сравнив токен с его expire_date, но в случае с использованием jwt Я думаю, что есть другой способ узнать, действителен ли токен или нет

Answer 2

Попробуйте это:

Используя снимок, вы можете получить параметры из URL.

ngOnInit() {
    this.router.snapshot.queryParams['paramName'];
 }

Answer 3

Я предполагаю, что вы перенаправляете как https://xxxxx.com/angular?jwt=XXXXX

, поэтому получите параметр в компоненте, используя активированный маршрут

ngOnInit() {
    this.route.queryParams.subscribe(params => {
        console.log(params); // {jwo: "XXXXXX"}
         // call auth service to check user is logged in or not
      });
  }