如何獲得canActive路線中的當前路線？

Question

我想根據角色限制路線。我想檢查導航路線是否有權訪問頁面或不在我的canActivate方法。但是，this.router.url這給了我以前的路線，而不是當前的導航路線。

Answer 1

使用route: ActivatedRouteSnapshot可以解決你的問題：

canActivate(route: ActivatedRouteSnapshot) { 
     console.log(route.url); 

     ... 
} 

你可以在這裏看到完整的規格爲ActivatedRouteSnapshot對象：

https://angular.io/docs/ts/latest/api/router/index/ActivatedRouteSnapshot-interface.html

Answer 2

可以使用ActivatedRouteSnapshot和RouterStateSnapshot解決您的問題。

這裏是我的Angular2應用程序的代碼示例。

AUTH-guard.ts

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { AuthCookie } from '../shared/services/auth-cookies-handler'; 

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
     if (this._authCookie.getAuth()) { 
      //add your custom conditions for route nevigation 
      return true; 
     } 
     else { 
      this.router.navigate(['/login']); 
      return false; 
     } 
    } 
} 

app.routing.ts

import {ModuleWithProviders } from '@angular/core'; 
import {Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from '../home/home'; 
import {LoginComponent } from '../account/login'; 
import { RegisterComponent } from '../account/register'; 
import { JourneyComponent } from '../journey/journey.component'; 
import AuthGuard from './auth-guard'; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'home', 
     pathMatch: 'full' 
    }, { 
     path: 'journey', 
     component: JourneyComponent, 
     children: [ 
      { path: '', redirectTo: 'details', pathMatch: 'full' }, 
      { path: 'details', component: JourneyDetailsComponent, canActivate: [AuthGuard] }, 
      { path: 'documents', component: DocumentsComponent, canActivate: [AuthGuard] }, 
      { path: 'review', component: ReviewComponent, canActivate: [AuthGuard] }, 
      { path: 'payment', component: PaymentComponent, canActivate: [AuthGuard] } 
     ] 
     , canActivate: [AuthGuard] 
    }, 
    { 
     path: 'application', 
     component: ApplicationComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'login', 
     component: LoginComponent 
    }, 
    { 
     path: 'activate-account/:uid', 
     component: AccountComponent 
    }, 
    { 
     path: 'reset-password/:uid', 
     component: ResetPasswordComponent 
    }, 
    { 
     path: 'home', 
     component: HomeComponent 
    }, 
    { 
     path: 'register', 
     component: RegisterComponent 
    } 
]; 

export const appRoutingProviders: any[] = [ 
]; 

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

希望這將幫助你！