import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, withHashLocation, Router } from '@angular/router';
let loggedIn = false;
export const authGuard = () => {
if (loggedIn) return true;
const router = inject(Router);
return router.createUrlTree(['/']);
};
@Component({
standalone: true,
template: `<p>Home (public). Login to access protected route.</p>`
})
export class Home {}
@Component({
standalone: true,
template: `<p>Protected works! You are logged in.</p>`
})
export class Protected {}
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, RouterLink],
styles: [`
nav a { margin-right: 8px; text-decoration: none; }
.status { margin-left: 8px; font-weight: 600; }
`],
template: `
<h3>Route Guard (canActivate)</h3>
<div class="toolbar">
<button (click)="toggle()">{{ loggedIn ? 'Log out' : 'Log in' }}</button>
<span class="status">Status: {{ loggedIn ? 'Logged in' : 'Logged out' }}</span>
</div>
<nav>
<a routerLink="/">Home</a>
<a routerLink="/protected">Protected</a>
</nav>
<router-outlet></router-outlet>
`
})
export class App {
get loggedIn() { return loggedIn; }
toggle() { loggedIn = !loggedIn; }
}
const routes = [
{ path: '', component: Home },
{ path: 'protected', component: Protected, canActivate: [authGuard] }
];
bootstrapApplication(App, {
providers: [provideRouter(routes, withHashLocation())]
});