Question

我有一个angular 5 SPA，通过@ uirouter / angular完成了路由。我的应用程序中的所有路由都受到登录页面的保护，例如：

<ng-container *ngIf="!(loggedIn$ | async)">
 <!-- LOGIN FORM "PAGE" HERE -->
</ng-container>
<ng-container *ngIf="loggedIn$ | async">
 <!-- OTHER "PAGES" HANDLING BY ROUTER HERE -->
 <ui-view></ui-view>
</ng-container>

因此，任何未登录状态如“ /＃/ xxx”的应用程序页面进入都会显示登录表单，并且如果登录成功则显示页面本身。但是现在我需要通过应用程序创建一个特殊页面，并使用自己的地址，例如“ / special-page”。因此，它不应是带有“＃”的SPA页面，因为并非所有域提供程序都正确处理了内部“＃”路由（我有一个经验，当所有内部路由都被域提供程序屏蔽时，用户只能从根路由进入应用程序，而所有内部导航并没有在浏览器中更改该地址）。我现在看到的唯一方法是将完全分离的新应用程序放在“ / special-page”路由上。还有其他选择吗？

Answer 1

您可以使用路由器guards（medium article）保护路由。然后，如果将lazy-loading应用于新路线，则仅在激活该路线时才会拉动模块，视图和组件。

因此，您的应用程序路由模块将具有以下条目：

  {
    path: 'special-page',
    loadChildren: 'app/special-area/special.module#AppSpecialModule',
    canActivate: [IsSpecialGuard]
  },

警卫（类似这样）：

  canActivate(): boolean {
    if (allowed()) {
      return true;
    }

    this.router.navigateByUrl('/404');
    return false;
  }

有很多关于延迟加载和保护的文档，我不会在这里全部编写，但希望它能引导您朝正确的方向发展。祝你好运！

将普通页面添加到angular 2+ SPA的最简单方法是什么？

1 个答案: