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

admin管理员组

文章数量:1406047

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).

本文标签： javascriptAngularrouternavigate() not redirecting to target pageStack Overflow