Question

我们有一个非语言应用程序的门户。单击某个链接，门户将重定向到我的Angular 6应用程序。重定向时，它将发送JWT令牌作为参数。现在，我的问题是我想读取此令牌并将其发送到后端api服务进行身份验证，以便向授权用户显示适当的页面。如何在我的angular 6中读取此令牌？

Answer 1

我假设您正在像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
      });
  }

Answer 2

我已经实现了相同的方法，通过检查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 因此，首先要检查用户是否已经通过身份验证，然后通过将令牌与其令牌的过期日期进行比较来检查其有效性，但是在使用jwt的情况下，我认为有另一种方法可以知道令牌是否仍然有效

Answer 3

尝试一下：

使用快照，您可以从URL获取参数。

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

Angular 6应用程序从外部调用应用程序中读取参数

3 个答案: