使用两种不同的可能路线实现主页答案

【问题标题】：Achieve homepage with two different possible routes使用两种不同的可能路线实现主页
【发布时间】：2019-04-30 21:04:21
【问题描述】：

google.com 是主页。我需要两条不同的主页路线。第一个路由在用户未登录 (Auth) 时有效，第二个路由在用户登录时有效（Dashboard）。

困难的部分是，当身份验证页面和仪表板页面都在一个主页上工作时，而不是不同的 URL。

注意：这两个模块都有多个组件。 Auth 有 (login - signup - reset) 组件，Dashboard 有 (index - users - posts) 组件。

const routes: Routes = [
  {
    path: 'index',
    loadChildren: './modules/index/index.module#IndexModule'
  },
  {
    path: 'error',
    loadChildren: './modules/error/error.module#ErrorModule'
  },

  // Fallback when no prior routes is matched
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        loadChildren: './modules/home/home.module#HomeModule',
        canLoad: [AuthGuard],
      },
      {
        path: 'auth',
        loadChildren: './modules/auth/auth.module#AuthModule',
        canLoad: [NoAuthGuard]
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IndexRoutingModule { }

const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        pathMatch: 'full',
        children: [
            {
                path: '',
                redirectTo: 'dashboard',
                pathMatch: 'full'
            },
            {
                path: 'dashboard',
                component: DashboardComponent,
                data: { title: 'Dashboard' }
            },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

const routes: Routes = [
    {
        path: '',
        component: AuthLayoutComponent,
        pathMatch: 'full',
        children: [
            {
                path: '',
                redirectTo: 'login',
                pathMatch: 'full'
            },
            {
                path: 'login',
                component: LoginComponent,
                data: { title: 'Sign In To Admin' }
            },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AuthRoutingModule { }

问题只在于路由，而不是守卫，什么都没有。

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

第一个路由在用户未登录时有效（Auth），第二个路由在用户登录时有效（Dashboard）。

这很棘手，因为用户的状态很难从路由器配置中访问。

我建议你使用 UrlMatcher 来控制使用哪个路由配置以及何时使用。

https://angular.io/api/router/UrlMatcher

棘手的部分是访问当前用户的登录状态，我假设这个状态只有服务知道。 UsersService.isLogged() 之类的东西返回一个 true/false 的 observable，因为它可能需要联系服务器来恢复之前的会话。

所以我要做的是使用激活器将此状态读入全局变量，然后使用 UrlMatcher 中的该变量。激活器不对路由进行任何逻辑控制，因为它总是会产生 true 来激活路由。我们只想访问服务并执行异步操作。

如果你定义了一个使用激活器的空父路由，那么我假设Angular会在处理子路由之前解析激活器。

let globalUserState = false;

class UserActivator implements CanActivate {
    public constructor(private users: UserService) {
    }

    public canActivate(): Observable<boolean> {
        return this.users.isLoggedIn().pipe(
            tap(value => globalUserState = value),
            mapTo(true)
        );
    }
}

const routes: Routes = [
    {
        path: '',
        canActivate: [UserActivator],
        children: [
            {
                // you can define more than one child using different matching rules
                matcher: (url: UrlSegment[]) => {
                    return url.length === 1 && url[0].path === '/' && globalUserState ? ({consumed: url}) : null;
                },
                children: [
                    {
                        // lazy modules must be loaded as children
                        path: '',
                        loadChildren: '../lazy/home/home.module#HomeModule'
                    }
                ]
            },
        ]
    }
];

【讨论】：