Question

我现在

一个 AppModule ，其中包含许多组件和一个AppCompoennt，它是带有 router-outlet 指令的模板组件。

我想以某种方式创建一个 AuthModule ，它在Login，Register Components之间有自己的模板AuthComponent。

用户登录后
它应该导航到在AppModule的AppComponent中渲染的HomeComponent。
现在，只要用户登录，就会使用AppComponent。当用户退出时。
它应该导航回AuthModule。

可以有两个模板组件并在它们之间导航吗？

Answer 1

这并不困难。您只需要一个父组件，通常是AppComponent。在AppComponent内部，您有主路由器插座。此路由器插座加载LoginComponent或仅适用于已登录用户的组件。

这可能是您的根AppComponent的路由器配置：

{
    path: 'login',
    component: LoginComponent,
    canActivate: [AuthenticationGuard]
},
{
    path: 'app',
    canActivate: [AuthenticationGuard],
    component: HomeComponent,
    children: [
        ...
    ]
}

在路由器配置中，您可以使用CanActivate。 CanActivate是一名警卫，负责检查用户是否具有导航到应用程序的路径/组件的权限。

在上面的示例中，AuthenticationGuard会检查用户是否已登录。所以现在你可以用这个警卫来保护你的应用程序。如果警卫获得您登录的信息，它可以自动导航到HomeComponent。

请将此警卫视为保护您的HomeComponent免受未授权用户侵害的示例：

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(private loginService: LoginService, private router: Router) { }

    canActivate() {
        if (this.loginService.isLoggedIn() !== true) {
            this.router.navigate(['/login']);
            return false;
        } else {
            return true;
        }
    }
}

如果警卫返回true，则表示路由器将导航到指定的路由。如果返回false，则路由器通过将用户重定向到登录页面来保护路由。

现在，您正在AppComponent的router-outlet的两个组件之间切换。在HomeComponent中，如果您希望为应用程序提供多个组件，则应创建另一个router-outlet。您可以将这些组件定义为HomeComponent。

的子组件

总结一下：

AppComponent - ＆gt;在登录和主页组件之间切换
HomeComponent - ＆gt;所有应受保护的内容和组件

因此，您可以将HomeComponent视为受保护应用程序部分的根组件。

带模板的Angular 2登录模块

1 个答案: