Angular：如何相对于 RouteGuard 中的目标路由调用 router.navigate() ？

Question

我有一个使用 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 来做到这一点，守卫类看起来像这样：

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

  。

Answer 1

事实证明，与

Component

等其他地方相比，构造函数注入的ActivatedRoute在RouteGuard中的工作方式有所不同。

在组件中，

ActivatedRoute

对象指向激活该组件的路由。例如，在

CategoryAComponent

类中，以下代码将导航到 CategoryB:

this.router.navigate([ '../CategoryB' ], { relativeTo: this.route });

但是，上面相同的代码在添加到

CategoryA

路由配置的 RouteGuard 类中不起作用。在我的测试中，我发现构造函数注入的

ActivatedRoute

对象指向根路由。另一方面，

ActivatedRouteSnapshot

对象（作为 canActivate 函数中的参数传递）指向目标路线（在我的例子中为 categoryA）。但是，我们无法在

ActivatedRouteSnapshot

函数中传递这个

this.router.navigate(...)

对象。

我找不到更好的方法来解决这个问题，但以下代码对我有用：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this.myService.checkPermission()
        .then(result => {
            if (!result.hasAccess) {
                //redirect here

                let redirectTo = route.pathFromRoot
                    .filter(p => p !== route && p.url !== null && p.url.length > 0)
                    .reduce((arr, p) => arr.concat(p.url.map(u => u.path)), new Array<string>());

                this.router.navigate(redirectTo.concat('categoryB'), { relativeTo: this.route });
            }
            return result.hasAccess;
        });
}

Answer 2

我可以为您提供更精简的解决方案吗：

import {
  CanActivateFn,
  UrlTree,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  createUrlTreeFromSnapshot
} from '@angular/router';

const canActivate: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): true | UrlTree {
  return result.hasAccess || createUrlTreeFromSnapshot(route, ['categoryB']);
}

通过此解决方案，您可以非常轻松地设置您可能需要的所有其他道具 - 命名商店导航、查询参数、片段...

从快照创建UrlTree

Answer 3

您可以使用 Angular 14 中新的 createUrlTreeFromSnapshot() 函数，如下所示：

const urlTree = createUrlTreeFromSnapshot(routeSnapshot, ['../categoryB']);
this.router.navigateByUrl(urlTree);