banana not found

src/app/app.routes.ts

@@ -32,4 +32,8 @@ export const routes: Routes = [
     ],
     canActivate: [authGuard],
   },
+  {
+    path: '**',
+    loadComponent: () => import('./component/not-found/not-found.component'),
+  },
 ];

src/app/component/auth/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -7,23 +7,30 @@ import {
 } from '@angular/forms';
 import AuthService from '../../../service/auth.service';
 import { AuthResponse, Token } from '../../../models';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
   imports: [ReactiveFormsModule],
   templateUrl: './login.component.html',
 })
-export default class LoginComponent {
+export default class LoginComponent implements OnInit {
   fb: FormBuilder = inject(FormBuilder);
   authService: AuthService = inject(AuthService);
   router: Router = inject(Router);
+  route: ActivatedRoute = inject(ActivatedRoute);
 
   form: FormGroup = this.fb.group({
     username: [null, [Validators.required]],
     password: [null, [Validators.required]],
   });
 
+  returnUrl: string | undefined;
+
+  ngOnInit(): void {
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
+  }
+
   login() {
     if (this.form.invalid) {
       console.log(this.form.errors);
@@ -34,7 +41,7 @@ export default class LoginComponent {
       localStorage.setItem('access_token', r.accessToken);
       localStorage.setItem('refresh_token', r.refreshToken);
 
-      this.router.navigate(['dashboard']);
+      this.router.navigate([this.returnUrl]);
     });
   }
 }

src/app/component/not-found/not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  template: '<h1>404 Not Found</h1>',
+  standalone: true,
+})
+export default class NotFoundComponent {}

src/app/service/auth.guard.ts

@@ -1,4 +1,4 @@
-import { CanActivateFn } from '@angular/router';
+import { CanActivateFn, Router } from '@angular/router';
 import { inject } from '@angular/core';
 import {
   HttpClient,
@@ -8,7 +8,9 @@ import {
 import { catchError, map, of } from 'rxjs';
 import { User } from '../models';
 
-export const authGuard: CanActivateFn = () => {
+export const authGuard: CanActivateFn = (route, state) => {
+  const router = inject(Router);
+
   return inject(HttpClient)
     .get<User>('https://dummyjson.com/auth/me', { observe: 'response' })
     .pipe(
@@ -18,6 +20,9 @@ export const authGuard: CanActivateFn = () => {
       }),
       catchError((err: HttpErrorResponse) => {
         console.log(err);
+        router.navigate(['/auth/login'], {
+          queryParams: { returnUrl: state.url },
+        });
         return of(false);
       }),
     );

src/app/service/http.interceptor.ts

@@ -8,6 +8,10 @@ export const httpInterceptor: HttpInterceptorFn = (
   req: HttpRequest<unknown>,
   next: HttpHandlerFn,
 ) => {
+  if (req.url.includes('/auth/login') || req.url.includes('/auth/register')) {
+    return next(req);
+  }
+
   return next(
     req.clone({
       setHeaders: {