Angular guard with multiple conditions and redirects

Question

I want to create a complex router guard that checks if the user is authenticated in the web application but, if so, it checks also other condition and for each true condition it redirects to a page (that is however under the same router guard). For better explaining this inside the router guard I have to do something like this:

canActivate(state: RouterStateSnapshot) {
   if(isAuthenticated()) {
     if(!isEmailVerified) {
        // redirect to the "check the email" page
     }
     else if(!isProfileComplete()) {
        // redirect to profile completion page
     }
     else {
        // redirect to user homepage
     }
    return true;
   } else {
   // redirect login
   return false;
   }
}

The problem actually is that this does not work because each redirect brings to a page protected by this guard and then each redirect calls another redirect and it ends with a infinite loop. I've already tried to check inside the conditions if the state.url is not the same that we redirect to inside the condition body but this does not work. Is there a simple solution to do this?

I think you are misusing guards. Why not use if conditions on the component? you can have a component/components showing when isEmailVerified, another when isProfileComplete etc... easy to debug easy to test — Jack M, Feb 01 '19 at 11:21
The problem is that I want to put the login only in the guard.. Otherwise I should make multiple checks in multiple component and that is not easy to debug.. moreover if the user writes for example the profile completion page url I do not want him to go there if the profile is already completed, and this is why also that route is under the guard — bertonc96, Feb 01 '19 at 11:27

score 1 · Answer 1 · answered Feb 01 '19 at 11:20

I suggest to use a redirection string for each condition and redirect the guard at the end of the function like;

canActivate(state: RouterStateSnapshot) {
   let redirectionPath: string = "";
   if(isAuthenticated()) 
   {
        if(!isEmailVerified) {
           redirectionPath = "emailverified";
        }
        else if(!isProfileComplete()) {
        // redirect to profile completion page
           redirectionPath = "completionPage";
        }
        else {
          // redirect to user homepage
           redirectionPath = "homepage";
        }
   } else {
           redirectionPath = "login";
   }

   this.router.navigate(['/your-path']);
   return true;
}

I think this is a better approach for the redirection, but the loop problem remains... — bertonc96, Feb 01 '19 at 11:36
@GiovanniBertoncelli could you please provide a simple stackblitz with the same behavior to look at the exact issue? — Seyhmus Gokcen, Feb 01 '19 at 13:07

Gauri Bane · Answer 2 · 2019-02-04T08:02:23.003

0

if(!isEmailVerified) {
        // redirect to the "check the email" page
     }
     else if(!isProfileComplete()) {
        // redirect to profile completion page
     }
     else {
        // redirect to user homepage
     }

Remove this code from guard & add it into another guard(Redirection Guard) from where you can redirect page using conditions

edited Feb 04 '19 at 08:02

answered Feb 01 '19 at 11:14

Gauri Bane

86
6

Thanks! But can I put conditional redirectTo in the routing module? – bertonc96 Feb 01 '19 at 11:17

Angular guard with multiple conditions and redirects

2 Answers2