如何在 canActive 路由中获取当前路由？

Question

我希望根据角色限制路由。 我想在我的canActivate方法中检查导航路线是否有访问页面的权限。 但是，this.router.url给出的是上一个路线而不是当前导航的路线。

- Yashasvi

Answer 1

使用route: ActivatedRouteSnapshot 可以解决你的问题:

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

      ...
}

您可以在此处查看完整规格，了解ActivatedRouteSnapshot对象：

- Mario Petrovic

Answer 2

您可能对于在此版本的 canActivate 方法中从 RouterStateSnapshot 参数获取URL以获取完整路径感兴趣（已在Angular 5中进行过测试）：

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
       console.log(state.url);
}

- Mohsen Kamrani

Answer 3

您可以使用 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);

希望这能帮到您！

- Amol Bhor