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

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

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 permissionsGuard: (
  ...requiredPermissions: UserPermissions[]
) => CanActivateFn =
  (...requiredPermissions) =>
  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
    const userService: UserService = inject(UserService);
    const router: Router = inject(Router);

    const user = userService.getCurrentUser();
    if (user == null)
      return router.createUrlTree(['/login'], {
        queryParams: {
          redirectUrl: state.url,
        },
      });

    if (
      requiredPermissions.every((permission) =>
        user.permissions.includes(permission)
      )
    ) {
      return true;
    }

    return router.createUrlTree(['/unauthorized'], {
      queryParams: {
        redirectUrl: state.url,
      },
    });
  };

const loginGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  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'] ?? 'departments'),
      ]);
      // 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: 'departments',
    loadComponent: () =>
      import('./core/department/department.component').then(
        (m) => m.DepartmentComponent
      ),
    canActivate: [authGuard],
  },
  {
    path: ':department',
    loadComponent: () =>
      import('./core/layout/layout.component').then((m) => m.LayoutComponent),
    children: [
      {
        path: 'recipes',
        loadComponent: () =>
          import('./features/recipes/recipes.component').then(
            (m) => m.RecipesComponent
          ),
        canActivate: [
          authGuard,
          permissionsGuard(UserPermissions.THAI_PERMISSION),
        ],
      },
      {
        path: 'recipe/:productCode',
        loadComponent: () =>
          import(
            './features/recipes/recipe-details/recipe-details.component'
          ).then((m) => m.RecipeDetailsComponent),
        canActivate: [
          authGuard,
          permissionsGuard(UserPermissions.THAI_PERMISSION),
        ],
      },
      {
        path: 'log',
        loadComponent: () =>
          import('./features/changelog/changelog.component').then(
            (m) => m.ChangelogComponent
          ),
      },
      {
        path: 'materials',
        loadComponent: () =>
          import('./features/material-settings/material-settings.component').then(
            (m) => m.MaterialSettingsComponent
          ),
      }
    ],
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'departments',
  },
  {
    path: 'unauthorized',
    loadComponent: () =>
      import('./core/auth/unauthorized.component').then(
        (m) => m.UnauthorizedComponent
      ),
  },
  {
    path: 'notfound',
    loadComponent: () =>
      import('./core/notfound.component').then((m) => m.NotfoundComponent),
  },
  {
    path: '**',
    redirectTo: 'notfound',
  },
];

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