Angular 2

Question

如何在Angular 2中实现以下流程？

我认为这是需要身份验证的应用程序中相当标准的场景。

应用程序所需的配置数据在可注射服务中定义。

• 当应用程序启动时（bootstraps），请检查localStorage。
• 如果localstorage包含有效的JWT令牌，请进行http调用以检索配置数据。收到响应并存储在服务中后，路由到Home。
• 如果localstorage不包含有效的JWT令牌，则路由到登录。当用户提交登录，http呼叫，将收到的JWT放入localstorage，进行另一次http呼叫（与上述相同），当收到响应并存储在服务中时，路由到Home。
• 稍后，受保护的组件具有验证的routerOnActivate 配置数据存在于服务中（意味着用户是 登录）。如果没有，请登录登录。

你认为有更好的方法吗？

我应该在哪里实现检查localstorage的逻辑并通过http调用异步获取配置？

在引导程序的App组件的构造函数中？

如何防止进一步执行其他组件（它们依赖于此配置数据的存在）？

Answer 1

是的，在我看来这听起来像是一个好方法！

  

我应该在哪里实现检查localstorage的逻辑并通过http调用异步获取配置？在引导程序的App组件的构造函数中？

首先，不要使用App组件的constructor 。

您应该使用构造函数（）来设置依赖注入，而不是其他。大多数情况下，我们使用ngOnInit进行所有初始化/减速，并避免在构造函数中使用的东西。构造函数应仅用于初始化类成员，但不应该执行实际的“工作”。更多信息in this answer。

其次，让我们看看究竟在哪里实现逻辑。创建AuthenticationService。

1. 实施login()方法并在isUserLoggedIn上添加AuthenticationService布尔值。用户登录时，将JWT令牌存储在LocalStorage中。此外，请将isUserLoggedIn切换为true。

2. 在isUserLogged()上实施AuthenticationService方法。应用程序启动时始终调用此方法，例如在应用程序的ngOnInit生命周期钩子内。 isUserLogged()方法逻辑应如下：

   • 首先，检查LocalStorage中是否有登录令牌。如果没有 - ＆gt;用户未登录。将isUserLoggedIn切换为false。
   • 其次，如果LocalStorage中有登录令牌 - 您必须检查它是否仍然有效（或者它已过期）。您的API应该为您提供一种方法，例如/check-if-user-is-logged。根据结果​​调用它 - 切换isUserLoggedIn。

3. 在logout()上实施AuthenticationService方法。当用户登录时，从LocalStorage中清除JWT令牌。此外，请将isUserLoggedIn切换为false。

然后，在所有受保护的路由上实施auth guard。

  

如何防止进一步执行其他组件（它们依赖于此配置数据的存在）？

在isUserLoggedIn上使用AuthenticationService布尔值。此外，您可以在AuthenticationService上应用检查特定配置的其他方法。

另外，在所有受保护的路线上使用auth guard。