У меня есть проект, разработанный с помощью Angular 4. Мне нужно контролировать доступ к определенному маршруту на основе прав пользователя. Упрощенная конфигурация маршрута выглядит так:
[
{ path: '', redirectTo: '/myApp/home(secondary:xyz)', pathMatch: 'full' },
{ path: 'myApp'
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', ... },
...
{ path: 'product'
children: [
{ path: '', redirectTo: 'categoryA', pathMatch: 'full' },
{ path: 'categoryA', component: CategoryAComponent, canActivate: [CategoryACanActivateGuard]},
{ path: 'categoryB', component: CategoryBComponent},
...
]
},
...
]
},
...
]
Теперь я хочу контролировать доступ к www.myWeb.com/myApp/product/categoryA
. Если у пользователя недостаточно прав, он будет перенаправлен на ... /product/CategoryB
. Для этого я написал CanActivate
RouteGuard, класс Guard выглядит так:
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute } from '@angular/router';
import { MyService } from '... my-service.service';
@Injectable()
export class CategoryACanActivateGuard implements CanActivate {
constructor(private myService: MyService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return this.myService.checkPermission()
.then(result => {
if (!result.hasAccess) {
//redirect here
this.router.navigate(['./myApp/product/categoryB']);
//works, but I want to remove hardcoding 'myApp'
//this.router.navigate(['../../categoryB']);
//doesn't work, redirects to home page
//this.router.navigate(['./categoryB'], { relativeTo: this.route});
//do not have this.route object. Injecting Activated route in the constructor did not solve the problem
}
return result.hasAccess;
});
}
}
Все работает нормально, но я хочу перенаправить относительно целевого маршрута, как показано ниже:
this.router.navigate(['/product/categoryB'], { relativeTo: <route-of-categoryA>});
// or
this.router.navigate(['/categoryB'], { relativeTo: <route-of-categoryA>});
К сожалению, relativeTo
принимает только ActivatedRoute
объектов, а у меня есть только ActivatedRouteSnapshot
и RouterStateSnapshot
. Есть ли способ навигации относительно целевого маршрута (в данном случае categoryA)? Любая помощь будет действительно оценена.
Примечание.
- Я не могу изменить конфигурацию маршрута, кроме добавления некоторых охранников маршрута.
- Я не ищу
this.router.navigateByUrl
, используяstate.url
. Я хочу использоватьrouter.navigate([...], { relativeTo: this-is-what-need})
.