带模板的 Angular 2 登录模块 [英] Angular 2 Login Module with template

问题描述

我现在有

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

One AppModule which has a number of components and one AppCompoennt which is the template componnet with the router-outlet directive.

我想以某种方式创建一个 AuthModule，它在登录、注册组件之间有自己的模板 AuthComponent.

I want in some way create an AuthModule which has its own template AuthComponent between Login, Register Components.

1. 当用户登录时

1. When user has logged in

它应该导航到在 AppModule 中的 AppComponent 中呈现的 HomeComponent.

it should navigate to the HomeComponent which is rendering in the AppComponent in AppModule.

现在只要用户登录就会使用 AppComponent.当用户注销时.

And now the AppComponent is used as long the user is logged in. When user logout.

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

It is possible to have two template compoents and navigate between them?

推荐答案

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

This is not so difficult. All you need is a parent component which is usually the AppComponent. Inside of the AppComponent you have your main router-outlet. And this router-outlet loads either the LoginComponent or the Component that is only for the users available who are logged in.

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

This could be your router configuration of your root AppComponent:

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

在您的路由器配置中，您可以使用 CanActivate.CanActivate 是一种守卫，用于检查用户是否有权导航到您的应用程序的路由/组件.

Inside your router configuration you can use CanActivate. CanActivate is a guard that checks if the user has the permission to navigate to a route/component of your application.

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

In the example above the AuthenticationGuard checks if the user is logged in or not. So now you can protect your application with this guard. If the guard gets the information that you are logged in it can navigate you automatically to the HomeComponent.

以保护您的 HomeComponent 免受未经授权用户攻击为例:

See this guard as an example to protect your HomeComponent from unauthorized users:

@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，路由器会通过将用户重定向到登录页面来保护路由.

If the guard returns true, that means that the router will navigate to the specified route. If it returns false, the router protect the route by redirecting the user to the login page.

所以现在您要在 AppComponent 的 router-outlet 的两个组件之间切换.在 HomeComponent 中，如果您想为您的应用程序创建多个组件，您应该创建另一个 router-outlet.您将这些组件定义为 HomeComponent 的子组件.

So now your are switching between both components of the AppComponent's router-outlet. In the HomeComponent you should create another router-outlet if you want to have more then one component for your application. You define these components as the childcomponents of the HomeComponent.

总结一下:

• AppComponent -> 在登录和主页组件之间切换

• AppComponent -> switch between Login and Home component

HomeComponent -> 所有需要保护的内容和组件

HomeComponent -> all contents and components that should be protected

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

So you can see the HomeComponent as the root component of the part of your application that is protected.

这篇关于带模板的 Angular 2 登录模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！