Question

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

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

注意：两个模块都有多个组件。 Auth具有（登录-注册-重置）组件，而Dashboard具有（索引-用户-帖子）组件。

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 { }

问题仅在于路由，而不是警卫，什么也没有。

Answer 1

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

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

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

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

棘手的部分是访问当前用户的登录状态，我认为此状态仅由服务知道。像UsersService.isLogged()之类的返回可观察到的 true / false 的东西，因为它可能需要联系服务器以恢复先前的会话。

所以我要做的是使用一个激活器将这个状态读入一个全局变量，然后从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'
                    }
                ]
            },
        ]
    }
];

通过两种不同的途径获得首页

1 个答案: