Angular Tutorial: Protected Routes 🎯

Welcome back to CodeYourCraft! Today, we're diving into a crucial aspect of Angular application development: Protected Routes. By the end of this tutorial, you'll be able to secure your Angular application's routes and ensure that only authenticated users can access certain parts of your app. Let's get started!

What are Protected Routes? 📝

Protected routes, also known as private routes, are a way to limit access to certain parts of your Angular application. They are essential when you want to ensure that only authenticated users can view or interact with specific parts of your app.

Why do we need Protected Routes? 💡

Protected routes provide an additional layer of security to your application. By restricting access to certain parts of your app, you can prevent unauthorized users from accessing sensitive information or performing unauthorized actions.

Setting up Protected Routes ✅

To set up protected routes in Angular, we'll be using the Angular's built-in CanActivate guard. This guard is responsible for deciding whether a route should be activated based on certain conditions.

Here's a simple example of a protected route:

typescript

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

In this example, our AuthGuard checks if the user is logged in. If the user is not logged in, the guard navigates to the login page and prevents access to the protected route.

Practical Application 💡

Let's create a simple Angular application with a protected route. First, create a new Angular project:

bash

ng new my-app
cd my-app

Next, create an AuthService and an AuthGuard as shown in the previous example. After that, add the AuthGuard to the route you want to protect:

typescript

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
];

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

In this example, we've protected the home route and added the AuthGuard to it. Now, only authenticated users can access the home page, and everyone else will be redirected to the login page.

Quiz 💡

And that's it for today! With protected routes, you've now taken a significant step towards securing your Angular application. In the next lesson, we'll delve deeper into Angular's route guard system and learn how to handle more complex authentication scenarios. Stay tuned! 🚀