Styjun

I am trying to have a AuthGuard redirect user to Unauthorized page if they are loggedin.
However it fails every time and i can't figure out why.

Error message:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'unauthorized'
Error: Cannot match any routes. URL Segment: 'unauthorized'

app.component.html

<router-outlet *ngIf="isAuthenticated()"></router-outlet>
<router-outlet *ngIf="!isAuthenticated()" name="public"></router-outlet>

auth.guard.ts

@Injectable(
 providedIn: 'root'
)
export class AuthGuard implements CanActivate 
 constructor(private router: Router, private authServ: AuthService ) 

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean 
 return this.checkUser(route, state);
 

 private checkUser(route: any, state: any): boolean 
 console.log('AuthorizationGuard is hit');

 if(!this.authServ.isAuthorized()) 
 this.router.navigate(['/unauthorized']);
 return false;
 else 
 return true;
 
 

my app.routing.module routes defined as follows:

 path: 'dashboard', component: MainDashboardComponent, canActivate: [AuthGuard] ,
 path: 'unauthorized', component: UnauthorizedComponent, outlet: 'public',
 path: '', component: HomeComponent, outlet: 'public'

Any advice is appreciated.
I suspect this isssue is tied to named outlet, as when i don't use it, it doesn't appear to occur.

The syntax for secondary outlet is different you need to define object is the frst parameter to link parameter of the array

Try this

private checkUser(route: any, state: any): boolean {
 console.log('AuthorizationGuard is hit');

 if(!this.authServ.isAuthorized()) 
 this.router.navigate([outlets:public:['unauthorized']]);
 return false;
 else 
 return true;
 

You added the unauthorized path for outlet public so it is happening.
You can remove the outlet option from the app.routing.module.ts

 path: 'unauthorized', component: UnauthorizedComponent, outlet: 'public',

TO:

 path: 'unauthorized', component: UnauthorizedComponent ,

And html

<router-outlet *ngIf="isAuthenticated()"></router-outlet>
<router-outlet *ngIf="!isAuthenticated()" name="public"></router-outlet>

To

<router-outlet></router-outlet>