Some auth route guard and link refactoring.

src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { RecipePage } from './pages/recipe-page/recipe-page';
 import { RecipesPage } from './pages/recipes-page/recipes-page';
 import { RecipesSearchPage } from './pages/recipes-search-page/recipes-search-page';
 import { RecipeUploadPage } from './pages/recipe-upload-page/recipe-upload-page';
+import { authGuard } from './shared/guards/auth-guard';
 
 export const routes: Routes = [
     {
@@ -16,6 +17,7 @@ export const routes: Routes = [
     {
         path: 'recipe-upload',
         component: RecipeUploadPage,
+        canActivate: [authGuard]
     },
     {
         path: 'recipes/:username/:slug',

src/app/shared/components/nav/NavLinkConfig.ts

@@ -0,0 +1,5 @@
+export interface NavLinkConfig {
+    relativeUrl: string;
+    title: string;
+    disabled?: boolean;
+}

src/app/shared/components/nav/nav.html

@@ -1,8 +1,10 @@
 <nav>
     <h2>Nav</h2>
     <ul>
-        <li><a [routerLink]="'/'">Browse Recipes</a></li>
+        @for (link of links(); track link.relativeUrl) {
-        <li><a [routerLink]="'/recipes-search'">Search Recipes</a></li>
+            @if (!link.disabled) {
-        <li><a [routerLink]="'/recipe-upload'">Upload Recipe</a></li>
+                <li><a [routerLink]="link.relativeUrl">{{ link.title }}</a></li>
+            }
+        }
     </ul>
 </nav>

src/app/shared/components/nav/nav.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { AuthService } from '../../services/AuthService';
+import { NavLinkConfig } from './NavLinkConfig';
 
 @Component({
     selector: 'app-nav',
@@ -7,4 +9,26 @@ import { RouterLink } from '@angular/router';
     templateUrl: './nav.html',
     styleUrl: './nav.css',
 })
-export class Nav {}
+export class Nav {
+
+    private readonly authService = inject(AuthService);
+
+    protected readonly links = computed<NavLinkConfig[]>(() => {
+        return [
+            {
+                relativeUrl: '/',
+                title: 'Browse Recipes',
+            },
+            {
+                relativeUrl: '/recipes-search',
+                title: 'Search Recipes',
+            },
+            {
+                relativeUrl: '/recipe-upload',
+                title: 'Upload Recipe',
+                disabled: this.authService.accessToken() === null
+            }
+        ];
+    });
+
+}

src/app/shared/guards/auth-guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth-guard';
+
+describe('authGuardGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/shared/guards/auth-guard.ts

@@ -0,0 +1,8 @@
+import { CanActivateFn } from '@angular/router';
+import { inject } from '@angular/core';
+import { AuthService } from '../services/AuthService';
+
+export const authGuard: CanActivateFn = (route, state) => {
+    const authService = inject(AuthService);
+    return authService.accessToken() !== null;
+};