在 Angular 的同一路径上有条件地加载不同的模块 [英] Conditionally Load Different Modules on the Same Path in Angular

问题描述

我有一个多用户 Angular 应用程序，每个用户都有一个模块(因为他们有完全不同的可访问页面)，如下所示:

I have a multiple user Angular app, with a module for each user (because they have totally different accessible pages), like this:

• app.module.ts
• app-routing.module.ts
• 登录/
  • login.component.ts
  • 页数/
    • 用户管理/
    • 配置/
    • 页数/
      • 任务管理/
      • 配置/
      • 页面/
      • guest.module.ts
      • guest-routing.module.ts

      从登录页面(/login from app-routing)，我想根据用户提供的凭据重定向到每个模块，但NOT与子路由像 /user /admin 或 /guest

      From the login page (/login from app-routing), I want to redirect to each module based on the credentials the user provided, but NOT with children routes like /user /admin or /guest

      相反，当管理员登录时，我希望重置 URL.因此，例如，管理员不应看到路径 /admin/user-management 或 /admin/configuration；它只是访问 /user-management 或 /configuration

      Instead, when an admin logs in, I want the URL to be reset. So, for example, the admin should not see the paths /admin/user-management or /admin/configuration; it just accesses /user-management or /configuration

      这可能吗?如果我有 admin 和 user 的 /configuration 路由会不会有问题?

      Is this possible? Will it be a problem if I have a /configuration route for both admin and user?

      这是一个 Stackblitz 工作示例.登录后查看 URL 路由.

      Here's a Stackblitz working example. Take a look at the URL routes when logged in.

      EDIT 2:在 Stackblitz 示例中，您可以看到 master 上的原始问题和 solution 分支上的工作解决方案.>

      EDIT 2: In the Stackblitz example, you can see the original problem on master and the working solution on solution branches.

      推荐答案

      解决方案:

      经过大量调查，我发现可以通过创建路由matcher来完成.

      After a lot of investigation, I found out that it can be done with creating a route matcher.

      代码:

      我设法让它与你的代码一起工作.这是工作示例:https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html

      I managed to make it work with your code. Here is the working example: https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html

      这是app-routing.module.ts上的相关代码:

      const routes: Routes = [
        {
          path: 'login',
          component: LoginComponent
        },
        {
          matcher: url => {
            const user_type = localStorage.getItem('user_type');
            if (user_type === 'user') {
              return url.length ? { consumed: [] } : { consumed: url };
            }
            return null;
          },
          loadChildren: () => import('./user/user.module').then(m => m.UserModule)
        },
        {
          matcher: url => {
            const user_type = localStorage.getItem('user_type');
            if (user_type === 'admin') {
              return url.length ? { consumed: [] } : { consumed: url };
            }
            return null;
          },
          loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
        },
        {
          matcher: url => {
            const user_type = localStorage.getItem('user_type');
            if (user_type === 'guest') {
              return url.length ? { consumed: [] } : { consumed: url };
            }
            return null;
          },
          loadChildren: () => import('./guest/guest.module').then(m => m.GuestModule)
        },
        {
          path: '',
          pathMatch: 'full',
          redirectTo: 'login'
        }
      ];
      
      

      注意:

      如此处所述:https://github.com/angular/angular/issues/23866#issuecomment-388527483，当我们使用路由 matcher 时，我们需要指定 url 的哪一部分被 matcher 函数，其余部分将发送到嵌套路由器.

      As stated here: https://github.com/angular/angular/issues/23866#issuecomment-388527483, when we use route matcher we need to specify which portion of the url was consumed by the matcher function, and the remaining portion will be send to the nested router.

      博客:

      以下是两篇博文，其中包含深入的详细信息和操作方法:

      Here are two blog posts that has in-depth details and walk-through how to do it:

      博客 1:https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483

      博客 2:https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

      这篇关于在 Angular 的同一路径上有条件地加载不同的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！