Angular 6 application to read parameters from an external calling application

Question

We have a portal which is a non-angular application. The portal redirects to my Angular 6 application on click of a some link. While redirecting it will send a JWT token as a parameter. Now my issues is that i want to read this token and send it to the backend api service for authentication so that appropriate pages are displayed to the authorized users. How can i read this token in my angular 6?

Answer 1

I am assuming that you are redirecting like https://xxxxx.com/angular?jwt=XXXXX

so get the parm in component using the activated route

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

Answer 2

I've implemented the same approach, By check the token in CanActivate in authguard you can check access for this token then allowed user to navigate to route or not here is an example:

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;
  }

} 

assuming that when login user successfully, you store token and expire_date in localstorage and set a property IsAuthenticated to true So first check if user is already authenticated then check validity by comparing token with its expire_date but in Case using jwt I think there is different way to know if token still valid or not

Answer 3

Try this:

Using snapshot you can get the params from URL.

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