How to get current route in canActive route?

Question

I want to restrict route as per role. I want to check whether navigated route does have permission to access page or not in my canActivate method. But, this.router.url this giving me previous route instead of current navigated route.

Answer 1

Using route: ActivatedRouteSnapshot can solve you problem:

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

      ...
}

You can see full spec here for the ActivatedRouteSnapshot object:

Answer 2

You might be interested in getting the url from the RouterStateSnapshot parameter in this version of the canActivate method to get the complete path (tested with Angular 5):

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

Answer 3

you can use ActivatedRouteSnapshot and RouterStateSnapshot to resolve your problem.

Here is code sample from my Angular2 application.

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

Hope this will help You!