angular - Angular 2 中的身份验证流程

Question

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

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

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

• 当应用程序启动( Bootstrap )时，检查 localStorage。
• 如果本地存储包含有效的 JWT token ，则进行 http 调用以检索配置数据。当收到响应并将其存储在服务中时，路由到主页。
• 如果 localstorage 不包含有效的 JWT token ，则路由到登录。当用户提交登录时，http 调用，将收到的 JWT 放入本地存储，进行另一个 http 调用(同上)，当收到响应并将其存储在服务中时，路由到 Home。
• 之后， protected 组件有一个 routerOnActivate 来验证配置数据存在于服务中(意味着用户是登录)。如果没有，路由到登录。

你有没有想到更好的方法？

我到底应该在哪里实现检查本地存储并通过 http 调用异步获取配置的逻辑？

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

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

Answer 1

是的，在我看来这听起来是个好方法!

Where exactly should I implement the logic that checks the localstorage and asynchronously fetches the config via http call? In the constructor of the App component that is bootstrapped?

首先，不要使用 App 组件的构造函数。

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

其次，让我们看看具体在哪里实现逻辑。创建一个 AuthenticationService。

1. 实现login() 方法并在AuthenticationService 上添加isUserLoggedIn bool 值。当用户登录时，将 JWT token 存储在 LocalStorage 中。此外，将 isUserLoggedIn 切换为 true。

2. 在AuthenticationService 上实现isUserLogged() 方法。始终在应用程序启动时调用此方法，例如在应用程序的 ngOnInit 生命周期 Hook 中。 isUserLogged() 方法逻辑应如下所示:

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

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

然后，在所有 protected 路由上实现身份验证保护。

How to prevent further execution of the other components (they rely on the presence of this config data)?

在 AuthenticationService 上使用 isUserLoggedIn bool 值。此外，您可以在 AuthenticationService 上应用其他方法来检查是否存在特定配置。

另外，在所有 protected 路由上使用 auth guard。