我将分享其中一个使用BoilerplateJS的项目是如何做到这一点的。在这个项目中,我们使用OAuth 2.0进行身份验证。
- 我们有一个单独的登录页面,没有使用BoilerplateJS或complex JS。将其分开的原因是,身份验证可能依赖于URL重定向,而这在JS中处理得不是很好。
- 一旦用户通过了正确的身份验证,我们就会收到服务器会话的auth_token,并将其存储为JS变量。我们使用全局Boiler.Context的“设置”来存储此令牌。由于设置继承到子上下文,因此我们能够从任何地方访问它。
- 用于授权目的,然后我们为登录的用户下载一个包含授权访问密钥的简单访问控制列表。这些键仅用于客户端验证以显示/隐藏控件。在后端服务上执行了真正的授权。
- 我们希望BoilerplateJS组件是完全自包含的,包括对其进行身份验证。因此,如果特定组件的视图模型从服务器接收到未经授权的401HTTP响应(未登录或会话过期),我们会在那里以不同的方式呈现组件,而不会将用户重定向到登录页面。
- 由于我们没有重定向,因此即使BoilerplateJS组件没有主动显示其内容,用户也能够使用页面上的其他信息。我们在组件上呈现了一些错误信息,其中包含指向re-login.
- Handling的链接,这是通过我们创建的通用错误处理程序完成的。从component.js中,我们将一个错误回调函数传递给我们的视图模型(您可能在上下文本身上也有此函数)。视图模型使用此回调函数来通知其中发生的任何错误。在使用401HTTP代码的情况下,将调用此处理程序,要求component.js呈现带有错误信息的UI,并在重新登录的URL上单击指向re-login.
- User的链接以返回登录页面。此URL包含对原始URL的反向引用,以便用户能够转到他在authentication.
之后所在的页面