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

问题描述

我现在

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

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

我想以某种方式创建一个 AuthModule ，它在Login，Register Components之间有自己的模板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 - >在Login和Home组件之间切换

• 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屋！