Clever Geek Handbook

How to get the current route in the canActive route?

I want to restrict the route according to the role. I want to check if the navigation route has permission to access the page or not in my canActivate method. But this.router.url

this gives me the previous route instead of the current navigation route.

+3


source to share


3 answers


Using route: ActivatedRouteSnapshot

can solve your problem:

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

      ...
}


You can see the complete specification for the ActivatedRouteSnapshot object here:

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

+2


source


you can use ActivatedRouteSnapshot

it RouterStateSnapshot

to solve your problem too.

Here is some sample code from my Angular2 app.

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 helps you!

0


source


You might be interested in getting the url from the parameter RouterStateSnapshot

in this version of the method canActivate

to get the full path (verified with Angular 5):

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


source






More articles:


All Articles