javascript - Angular 中的无效 url 应该在重定向之前检查一些条件

问题描述

我的初始域是 localhost:4200，它根据我的路由将我重定向到某个页面，但我想输入一个无效域，例如 localhost:4200/Whasup 或 localhost:4200/Whasdown，其中 Whasup 和 whasdown 页面没有不存在。在我被重定向到默认的 Angular 404 页面之前，我需要检查一些条件。如果我的条件不满足，那么我想将它重定向到 404 页面，否则我想处理它。

我的 app-routing.module.ts（Auth Guard 检查用户是否登录）

const routes: Routes = [
  // Fallback when no prior route is matched
  // Shell.childRoutes([]),
  // { path:'home', component: HomeComponent},
  // { path: '**', redirectTo: '', pathMatch: 'full' }

  Shell.childRoutes([
    { path: '', component: RedirectToComponent, canActivate: [AuthGuard] },
    {
      path: 'dashboard',
      loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule',
      canActivate: [AuthGuard]


    },
    {
      path: 'exec-dashboard',
      loadChildren:
        'src/app/exec-dashboard/exec-dashboard.module#ExecDashboardModule',
      canActivate: [AuthGuard]
    },
    {
      path: '**',
      redirectTo: '',
      canActivate: [AuthGuard]
    }
  ]),
  {
    path: 'auth',
    loadChildren: 'src/app/auth/auth.module#AuthModule',
    canActivate: [AuthGuard]
  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: false, // Enable for debug purpose.
      useHash: true,
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule],
  providers: [AuthGuard]
})

我还实现了 KeyCloak Angular 拦截器，如果用户未登录，它可以帮助我进入 keycloak 登录页面。我在 app.module.ts 中定义了提供程序。

 providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializer,
      multi: true,
      deps: [KeycloakService]
    }
  ],

因此，每当我点击我的初始域（localhost:4200）时，在我被重定向到任何页面之前都会调用初始化函数，无效的子域 url（localhost:4200/Whasup）也会发生同样的情况。编辑：我可以实现上述任何机会，或者我可以在角度实现子域逻辑，例如，tenant1.localhost:4200 或tenant2.localhost:4200，（部署时它将是tenant1.mycompany.com）。有人可以建议我一种以角度实现子域路由的方法。非常感谢。

标签： javascripthtmlangularrouting

解决方案

我将在这里发布，因为我的解释不适合评论。我不确定这是否一定会回答您的问题，因为有很多事情需要考虑。所以这里...

笔记

如果您希望您的应用程序使用不能localhost与子域（如tenantName.localhost:4200）一起使用的子域来进行本地测试，则必须使用 hosts 文件设置自定义域。你可以在这里看到一个例子。就我个人而言，我更喜欢拥有一个/tenantname而不是子域，但这是个人偏好，我猜是基于您的业务需求。

处理重定向

无论是使用子域还是客户端名称作为 URL 的一部分，您都应该能够在用户登录后处理“自动重定向”到“租户 URL” 。我假设在成功登录后作为响应您将获得租户名称。获得租户名称后，您可以轻松地将用户重定向到正确的 URL。

我之所以提到这一点，是因为您在上一条评论中表示，在应用程序启动时，您希望重定向到“特定于租户”的 URL。重要提示：如果用户没有登录，您将无法知道要重定向到哪个 URL。

现在，如果用户已登录并访问该网站？好吧，AuthGuard您可以有一个条件来检查用户是否已登录，如果是，则将用户重定向到正确的租户 URL。我再次假设作为登录响应的一部分，您有一些信息可以让您知道用户所属的租户。

简而言之，我建议：

确保成功身份验证的响应返回有关租户的一些信息。
使用身份验证响应中的租户信息，您可以将用户从 Angular 应用程序重定向到正确的租户 URL。
另请记住，当用户尝试访问他们无权访问的租户的 URL 时，您需要处理这种情况。

javascript - Angular 中的无效 url 应该在重定向之前检查一些条件

问题描述

解决方案

推荐阅读