Passing data via AuthGuard

Ionic Framework ionic-v3
1

I have a couple pages in my app which require authentication, and several that don’t. Instead of making everyone login, I’ve set up an AuthGuard that restricts access to those to pages. This is working as expected.

I now want to pass data to my login page so that, after login, the user is redirected to the page they are trying to access. I’m unsure on how to do this.

From what I could find, I pass the value in via data

{
    path: 'map', loadChildren: './map/map.module#MapPageModule', canActivate: [AuthGuard], 
    data: { page: 'map' }
}

But how do I read this on my login page so I can send them to the proper page, something like this?

if( data == 'map') {
    this.router.navigate(['/map']);
}
2

https://www.comformark.com.au/news/post/ionic-4-guards-and-behavioursubjects-to-control-access-to-your-app

canActivate(ars: ActivatedRouteSnapshot, rss: RouterStateSnapshot): boolean {
  // restrict user access-------------------------------------------------------------
  let canProceed = this.loginService.getUserAccessLevelValue() >= ars.data.accessLevel;
  if (canProceed == false) {
    if (ars.data.accessLevel == 4) {
      this.showAlert('Access Denied - canActivate', 'You must be an Administrator to view this page');
    } else {
      this.showAlert('Please Login - canActivate', 'You must be logged in to view this page');
    }

    // go to the login page, passing the next page to go to
    this.router.navigate(['/login', { 'nextPage': rss.url }]);
    return false;
  }
4

Figured it out.

data was not being passed to the login.page.ts, however it was being passed to auth.guard.ts, so all I had to do was capture it there and send it as a queryParam to login.page.ts

auth.guard.ts

import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';

canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
    ...
    this.router.navigate(['/login'], { queryParams: route.data });
    ...
}

login.page.ts

import { Router, ActivatedRoute } from '@angular/router';

page: any;

constructor(public route: ActivatedRoute) {
    this.route.queryParams.subscribe((res) => {
        this.page = res.page;
    });
}

login(formData: any) {
    if (this.page === 'map') {
        this.router.navigate(['/map']);
    }
}