如何从 JSON 值添加动态路由保护？

Question

我正在尝试在我的角度应用程序中添加路线防护。

我正在从具有以下结构的 JSON 动态构建路由

 {
      "path": "software-upgrade",
      "title": "Software Upgrade",
      "canActivate": "AuthGuard",  // This is the route guard name
      "isMFE": true,
      "loadRemoteModule": {
        "type": "manifest",
        "remoteName": "software-upgrade",
        "exposedModule": "./Module"
      },
      "moduleName": "SoftwareUpgradeModule"
    },

我在构建这样的路线时使用canActivate的值

routeArr.push({
          path: route.path,
          canActivate: [AuthGuard],   // this works
          // canActivate: [route.canActivate], // this does not work even though it is fetching the same value from JSON
        });

如果我使用 JSON 中的值，我会在控制台中收到以下错误，但如果我直接指定守卫的值，也会出现同样的情况。

有什么办法可以处理吗？

Answer 1

您需要创建一个对象映射，其中键为

authGuard

，值为

AuthGuard

（实际导入）

import { AuthGuard } from 'some path';

export const DYNAMIC_ROUTING_MAP = {
    'authGuard': AuthGuard,
    ...
}

然后在动态路由上，我们可以简单的获取引用并设置它！

routeArr.push({
   path: route.path,
   canActivate: [DYNAMIC_ROUTING_MAP[route.canActivate]], // <- changed here!
});