带模板的Angular 2登录模块-Java 学习之路

我现在有了

一个 AppModule ，它有许多组件和一个AppCompoennt，它是带有 router-outlet 指令的模板组件 .

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

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

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

1 回答

0
这并不困难 . 您只需要一个父组件，通常是 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 - >在Login和Home组件之间切换
- HomeComponent - >应保护的所有内容和组件
因此，您可以将 HomeComponent 视为受保护应用程序部分的根组件 .
回复于 2024-05-08T15:18:23+08:00

带模板的Angular 2登录模块

1 回答

相关问题