How To Redirect To Another Page After Login In Angular2

Log in here

In this article, I will guide you through the process of redirecting to another page after login in Angular 2. Redirecting the user to a specific page after login is a common requirement in web applications, and Angular 2 provides a straightforward way to achieve this.

First, let’s take a look at the typical login process in Angular 2. In most cases, you would have a login form where the user enters their credentials, and upon successful authentication, they should be redirected to a specific page, such as a dashboard or a home page.

To implement this functionality, we can leverage the routing capabilities of Angular 2 along with the authentication service. Here’s a step-by-step guide:

Step 1: Setting up the Routes

Before we can redirect the user after login, we need to define our routes in the Angular 2 application. Open the app.module.ts file and import the necessary modules:

import { RouterModule, Routes } from '@angular/router';

Next, define your routes. For example:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

Here, we have a default route that redirects to the login page, a login route that renders the LoginComponent, and a dashboard route that renders the DashboardComponent. Note the use of the canActivate property in the dashboard route. This is where we’ll implement the authentication logic.

Step 2: Implementing the Authentication Service

In Angular 2, it’s common to use a service to handle authentication. Create a new file called auth.service.ts and define your service:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
  constructor(private router: Router) {}

  login(username: string, password: string): void {
    // Your authentication logic goes here
    if (username === 'admin' && password === 'password') {
      // Authentication successful
      this.router.navigate(['dashboard']); // Redirect to the dashboard page
    } else {
      // Authentication failed
      // Handle error or display error message
    }
  }
}

In this example, we have a login function that takes the username and password as arguments. Inside the function, you can implement your authentication logic. If the authentication is successful, we use the router.navigate method to redirect the user to the dashboard page.

Step 3: Implementing the Login Component

Now, let’s implement the LoginComponent where the user will enter their credentials. Create a new file called login.component.ts and define your component:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `
    <form (ngSubmit)="login()">
      <input type="text" [(ngModel)]="username" name="username" placeholder="Username" required>
      <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  username: string;
  password: string;

  constructor(private authService: AuthService) {}

  login(): void {
    this.authService.login(this.username, this.password);
  }
}

In this example, we have a simple login form with two input fields for the username and password. When the form is submitted, the login function is called, which in turn calls the login function of the AuthService.

Step 4: Adding the AuthGuard

To protect the dashboard route and ensure that only authenticated users can access it, we can use an Angular 2 feature called canActivate. Create a new file called auth.guard.ts and define your guard:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Your authentication check logic goes here
    if (localStorage.getItem('isLoggedIn') === 'true') {
      return true; // User is authenticated, allow access to the route
    } else {
      this.router.navigate(['login']); // User is not authenticated, redirect to the login page
      return false;
    }
  }
}

In this example, we have an AuthGuard class that implements the CanActivate interface. Inside the canActivate function, you can implement your authentication check logic. If the user is authenticated, we return true to allow access to the route. If the user is not authenticated, we use the router.navigate method to redirect them to the login page.

Step 5: Updating the AppModule

Finally, we need to update the app.module.ts file to include the AuthService and AuthGuard:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';
import { DashboardComponent } from './dashboard.component';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  // Define your routes
];

@NgModule({
  declarations: [
    // Declare your components
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    AuthService,
    AuthGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

With these updates, you should now be able to redirect the user to the dashboard page after successful login in Angular 2.

Conclusion

Redirecting to another page after login in Angular 2 is a crucial feature for many web applications. By leveraging the built-in routing capabilities of Angular 2 and implementing the necessary services and guards, we can easily achieve this functionality. Remember to handle authentication logic securely and customize the routes according to your application’s requirements.