如何获得canActive路线中的当前路线?
问题描述:
我想根据角色限制路线。我想检查导航路线是否有权访问页面或不在我的canActivate方法。但是,this.router.url
这给了我以前的路线,而不是当前的导航路线。如何获得canActive路线中的当前路线?
答
使用route: ActivatedRouteSnapshot
可以解决你的问题:
canActivate(route: ActivatedRouteSnapshot) {
console.log(route.url);
...
}
你可以在这里看到完整的规格为ActivatedRouteSnapshot对象:
https://angular.io/docs/ts/latest/api/router/index/ActivatedRouteSnapshot-interface.html
答
可以使用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);
希望这将帮助你!
谢谢,它的工作。 – Yashasvi
很高兴帮助。干杯。 –