Taobin-Recipe-Manager/client/src/app/app-routing.module.ts

import { NgModule, inject } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivateFn,
  Router,
  RouterModule,
  RouterStateSnapshot,
  Routes,
} from '@angular/router';
import { UserService } from './core/services/user.service';
import { map } from 'rxjs';

const authGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const userService: UserService = inject(UserService);
  const router: Router = inject(Router);

  return userService.isAuthenticated.pipe(
    map((isAuth) => {
      if (isAuth) {
        return true;
      }
      return router.createUrlTree(['/login'], {
        queryParams: {
          redirectUrl: state.url,
        },
      });
    })
  );
};

const loginGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const userService: UserService = inject(UserService);
  const router: Router = inject(Router);

  return userService.isAuthenticated.pipe(
    map((isAuth) => {
      if (!isAuth) {
        return true;
      }
      // redirect to redirectUrl query param
      console.log(route.queryParams['redirectUrl']);
      return router.createUrlTree([
        router.parseUrl(route.queryParams['redirectUrl'] ?? '/recipes'),
      ]);
      // return false;
    })
  );
};

const routes: Routes = [
  {
    path: 'login',
    loadComponent: () =>
      import('./core/auth/auth.component').then((m) => m.AuthComponent),
    canActivate: [loginGuard],
  },
  {
    path: 'callback',
    loadComponent: () =>
      import('./core/callback/callback.component').then(
        (m) => m.CallbackComponent
      ),
  },
  {
    path: '',
    loadComponent: () =>
      import('./core/layout/layout.component').then((m) => m.LayoutComponent),
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'recipes',
      },
      {
        path: 'recipes',
        loadComponent: () =>
          import('./features/recipes/recipes.component').then(
            (m) => m.DashboardComponent
          ),
        canActivate: [authGuard],
      },
      {
        path: 'recipe/:productCode',
        loadComponent: () =>
          import(
            './features/recipes/recipe-details/recipe-details.component'
          ).then((m) => m.RecipeDetailsComponent),
        canActivate: [authGuard],
      },
      // {
      //   path: 'log',
      //   loadComponent: () =>
      //     import('./features/changelog/changelog.component').then(
      //       (m) => m.ChangelogComponent
      //     ),
      // },
      {
        path: '**',
        redirectTo: 'recipes',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}