Issue
Angular 16 routing... I have child routes that are protected - these all work as expected. I also have child routes that are unprotected and all but one work correctly. The route "resetpassword" is always redirecting me to the login page and never routing to the resetpassword page.
Here is my route array:
const routes: Routes = [
{
path: '', component: SecureLayoutComponent, canMatch: [canMatchAuthenticated],
children: [
{ path: '', component: PageDashboardComponent },
{ path: 'users', component: PageUsersComponent },
{ path: 'user', component: PageUserComponent },
{ path: 'companies', component: PageCompaniesComponent },
{ path: 'company', component: PageCompanyComponent },
{ path: 'professionals', component: PageProfessionalsComponent },
{ path: 'professional', component: PageProfessionalComponent },
{ path: 'member', component: PageProfessionalComponent },
{ path: 'landingreports', component: PageLandingReportsComponent },
{ path: 'landingreport', component: PageLandingReportComponent },
{ path: 'cohorts', component: PageCohortsComponent },
{ path: 'cohort', component: PageCohortComponent }
],
runGuardsAndResolvers: 'always'
},
{
path: '', component: LoggedOutLayoutComponent, canActivate: [canActivateUnauthenticated],
children: [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: PageLoginComponent },
{ path: 'forgotpassword', component: PageForgotPasswordComponent },
{ path: 'resetpassword', component: PageResetPasswordComponent },
],
runGuardsAndResolvers: 'always'
}
];
The Authenticated Guard
const canMatchAuthenticated: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
let b = inject(AuthService).isAuthenticated();
return b;
}
The Unauthenticated guard
const canActivateUnauthenticated: CanActivateFn = (route: Route, state: RouterStateSnapshot) => {
let b = !(inject(AuthService).isAuthenticated());
return b;
}
Given a link such as: mydomain.com/resetpassword?token=<some-token>
The application always ends up at the login screen.
When I use the Alt+Back - it will go to the resetpassword screen.
I have tried everything I can to get it to work and have looked for a couple of days for a solution.
Can anyone help?
Edit
Got rid of deprecated CanActivate
derived classes.
Switched to canMatch
for the SecureLayoutComponent
.
Still does not work.
Please help!
Solution
If I understand correctly, your goal is to skip the SecureLayoutComponent
on route ''
when AuthenticatedGuard
returns false
, and then proceed to show LoggedOutLayoutComponent
on route ''
if UnauthenticatedGuard
returns true
.
In that case, you should use the canMatch
route guard on SecureLayoutComponent
instead of canActivate
. canMatch
is the only guard that will skip the current route if the guard returns false
and will proceed with other Route
configurations. In contrast, canActivate
will cancel the navigation if any guard returns false
.
You can read more about it in the Angular documentation for canMatch and canActivate.
Answered By - Karel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.