How can I avoid that my logged-in user goes back to the login url in angular 16?
I have an angular 16 application and want to avoid that a user that is logged in can return to the login url. It should be possible with an authGuard, but I don't know how I could achieve this. In my app-routing module, I have this:
import { authGuard } from './guards/auth.guard';
import { LoginComponent } from './user/login/login.component';
import { ProfileComponent } from './user/profile/profile.component';
const routes: Routes = [
{ path: '', redirectTo: '/user/profile', pathMatch: 'full' },
{
path: 'user',
children: [
{ path: 'login', component: LoginComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [authGuard] },
{ path: '', redirectTo: 'profile', pathMatch: 'full' },
{ path: '**', redirectTo: 'profile', pathMatch: 'full' },
],
},
{ path: '**', redirectTo: '/user/profile', pathMatch: 'full' }
]
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule],
})
export class AppRoutingModule {}
and my authGuard looks like this:
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../user/auth.service';
import { inject } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
export const authGuard: CanActivateFn = (route, state) => {
const token = localStorage.getItem('access_token');
const jwtHelper: JwtHelperService = inject(JwtHelperService);
const authService = inject(AuthService);
if (token && !jwtHelper.isTokenExpired(token)) {
return true;
} else {
authService.logout();
return false;
}
};
The token authentication works fine, and the user/profile url is properly protected by the authGuard. For user/login however, this does not make sense, since everyone should be able to go to this page.
I tried to put the authGuard at the end of the user path, so it all parent and children paths are guarded, but that causes issues with finding the correct path. I also tried to check in the authGurad if (state.url == '/user/login') {router.navigate(['/user/profile']}
but this causes a circular reroute.
Comments
Post a Comment