#CanActivate guard removing queryparams on returning true.

15 messages · Page 1 of 1 (latest)

slim cloud
#

I have a CanActivate guard that is checking if the user is logged in, if they are, return true and navigates to localhost:4200/ otherwise it navigates to /login but also keeps the current query params as I'm coming from an external page. However on returning true, all the query params are removed, how can I preserve these?

This is the code below:

import { Injectable } from "@angular/core";
import {
ActivatedRoute,
ActivatedRouteSnapshot,
CanActivate,
Router,
RouterStateSnapshot,
} from "@angular/router";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { UserService } from "../user/user.service";

@Injectable()
export class RedirectLoginGuard implements CanActivate {
constructor(
private userService: UserService,
private router: Router,
private route: ActivatedRoute
) {}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.isLoggedIn(route, state);
}

isLoggedIn(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.userService.userProfile$.pipe(
map((response) => {
if (response) {
//here on return true, my query params aren't kept and it just resolves to localhost:4200 instead of localhost:4200?userid=34424 etc.
return true;
} else {
this.router.navigate(["/login"], {
queryParams: route.queryParams,
});
return false;
}
})
);
}
}

rapid gale
#

Firstly, your guard should return a RedirectCommand or UrlTree to do a navigation instead of calling navigate.
Does it work if you disable the guard? I can't imagine why a guard would cause query parameters to be removed.

slim cloud
#

and the query params are kept when disabled and logged in

#

I've also formatted the guard now to this:

import { Injectable } from "@angular/core";
import {
ActivatedRoute,
ActivatedRouteSnapshot,
CanActivate,
Router,
RouterStateSnapshot,
} from "@angular/router";
import { map } from "rxjs/operators";
import { UserService } from "../user/user.service";

@Injectable()
export class RedirectLoginGuard implements CanActivate {
constructor(
private userService: UserService,
private router: Router,
private route: ActivatedRoute
) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.isLoggedIn(route, state);
}

isLoggedIn(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.userService.userProfile$.pipe(
map((response) => {
if (response) {
return this.router.createUrlTree(["/"], {
queryParams: route.queryParams,
});
} else {
return this.router.createUrlTree(["/login"], {
queryParams: route.queryParams,
});
}
})
);
}
}

#

but still not working

rapid gale
#

You just return true in the case where you want the navigation to apply normally

#

Can you post a reproduction on Stackblitz?

slim cloud
rapid gale
#

I don't see why not

slim cloud
#

ive never made one haha

rapid gale
#

You can also share a Git project if that is easier for you

slim cloud
# rapid gale I don't see why not

thank you for trying to help! I managed to fix it, it was ...canActivate(redirectLoggedIn) that was troubling it on the login route. This is something from angularfire, removing it managed to fix it

rapid gale
#

Okay

#

Glad you figured it out 🙂