javascript - Angular - router.navigate() not redirecting to target page - Stack Overflow

i'm working on a simple login process where i try to protect certain path unless they are authenticated.

app.routing.ts

    const  appRoutes: Routes = [
    {
      path: 'add-merchant-admin',
      ponent : AddMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'list-merchant-admin',
      ponent : ListMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'login',
      ponent : LoginComponent
    },
    {
      path: '**',
      ponent: NotFoundComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

authGard.service.ts

  import { Injectable } from '@angular/core';
  import {CanActivate, Router} from "@angular/router";
  import {AuthenticationService} from "../authentication-service/authentication.service";

  @Injectable()
  export class AuthGard implements CanActivate {

    constructor(private _authService:AuthenticationService, private _router:Router) { }

    canActivate() {
      if(this._authService.isLoggedIn)
        return true;

      this._router.navigate(['login']);
      return false;
    }
  }

authentication-service

    @Injectable()
    export class AuthenticationService {

      isLoggedIn = false;

      constructor() {
      }

      login(){
         this.isLoggedIn = true;
      }

      logout(){
        this.isLoggedIn = false;
      }
    }

When I try to access a guarded path like add-merchant-admin, the browser keeps loading the page, consuming a lot of memory until it freezes.

These are the details about my app.

node: 6.10.2

os: win32 x64

@angular/animations: 4.2.3

@angular/mon: 4.2.3

@angular/piler: 4.2.3

@angular/core: 4.2.3

@angular/forms: 4.2.3

@angular/http: 4.2.3

@angular/material: 2.0.0-beta.6

@angular/platform-browser: 4.2.3

@angular/platform-browser-dynamic: 4.2.3

@angular/router: 4.2.3

@angular/cli: 1.0.1

@angular/piler-cli: 4.2.3

Dependency Injection is verified.

Component are correctly imported.

I don't know what's going on with this app, normally it should work.

Hope you guys can help me out.

Huge Thanks in advance.

i'm working on a simple login process where i try to protect certain path unless they are authenticated.

app.routing.ts

    const  appRoutes: Routes = [
    {
      path: 'add-merchant-admin',
      ponent : AddMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'list-merchant-admin',
      ponent : ListMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'login',
      ponent : LoginComponent
    },
    {
      path: '**',
      ponent: NotFoundComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

authGard.service.ts

  import { Injectable } from '@angular/core';
  import {CanActivate, Router} from "@angular/router";
  import {AuthenticationService} from "../authentication-service/authentication.service";

  @Injectable()
  export class AuthGard implements CanActivate {

    constructor(private _authService:AuthenticationService, private _router:Router) { }

    canActivate() {
      if(this._authService.isLoggedIn)
        return true;

      this._router.navigate(['login']);
      return false;
    }
  }

authentication-service

    @Injectable()
    export class AuthenticationService {

      isLoggedIn = false;

      constructor() {
      }

      login(){
         this.isLoggedIn = true;
      }

      logout(){
        this.isLoggedIn = false;
      }
    }

When I try to access a guarded path like add-merchant-admin, the browser keeps loading the page, consuming a lot of memory until it freezes.

These are the details about my app.

node: 6.10.2

os: win32 x64

@angular/animations: 4.2.3

@angular/mon: 4.2.3

@angular/piler: 4.2.3

@angular/core: 4.2.3

@angular/forms: 4.2.3

@angular/http: 4.2.3

@angular/material: 2.0.0-beta.6

@angular/platform-browser: 4.2.3

@angular/platform-browser-dynamic: 4.2.3

@angular/router: 4.2.3

@angular/cli: 1.0.1

@angular/piler-cli: 4.2.3

Dependency Injection is verified.

Component are correctly imported.

I don't know what's going on with this app, normally it should work.

Hope you guys can help me out.

Huge Thanks in advance.

• javascript
• angular
• routes
• angular-ui-router

Share Improve this question Follow edited Jun 18, 2017 at 21:32 Ali 3,46966 gold badges4343 silver badges5656 bronze badges asked Jun 18, 2017 at 14:50 Soufiane RabiiSoufiane Rabii 42722 gold badges99 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Modify the routes as below,

const  appRoutes: Routes = [
    {
      path: 'add-merchant-admin',
      ponent : AddMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'list-merchant-admin',
      ponent : ListMerchantAdminComponent,
      canActivate : [AuthGard]
    },
    {
      path: 'login',
      ponent : LoginComponent
    },
    {
      path: 'notfound',
      ponent :NotFoundComponent
    },
    {
      path: '',
      redirectTo: 'login',
      pathMatch: 'full'
    },
    {
      path: '**',
      redirectTo: 'notfound',
      pathMatch: 'full'
    },
];

Change the AuthGuard to this:

  import { Injectable } from '@angular/core';
  import {CanActivate, Router} from "@angular/router";
  import {AuthenticationService} from "../authentication-service/authentication.service";

  @Injectable()
  export class AuthGard implements CanActivate {

    constructor(private _authService:AuthenticationService, private _router:Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      if(this._authService.isLoggedIn)
        return true;

      this._router.navigate(['/login']);
      return false;
    }
  }

With / as prefix in the first argument of the parameters array of the navigate method you tell angular that the path is absoluth (starts from root).