nuxtjs 和后端 API 之间的授权答案

【问题标题】：Authorization between nuxtjs and the backend APInuxtjs 和后端 API 之间的授权
【发布时间】：2018-04-29 10:40:17
【问题描述】：

我有一个使用Nuxtjs 创建的Vuejs 应用程序。我还使用Django 作为后端服务器，并制作了一个 API 来与后端服务器 (Django) 和前端应用程序 (Vuejs/Nuxtjs) 进行交互。任何与 API 相关的获取都在页面的AsyncData function 中完成，以使用axios 在服务器端呈现数据。另外，我正在使用 json web token 身份验证，成功登录后，API 会生成一个 jwt 令牌，该令牌存储在 cookie 中。因此，在后端，它将始终检查请求的令牌授权标头。如果请求来自登录用户（授权令牌），则返回经过身份验证的 json 数据，否则返回未经身份验证的数据。

问题：

当用户导航到应用程序时，我想检查用户是否已通过身份验证。如果用户经过身份验证，则呈现经过身份验证的页面。如果不是，则显示未经身份验证的页面。

我的想法：

当从AsyncData function 上的应用程序完成获取时，我会检查 cookie 是否有任何值。如果存在则发送带有请求授权标头的令牌。但是，由于页面将首先在服务器上呈现，而不是在客户端（cookie 实际所在的位置），它永远不会找到授权令牌。

如何检查用户是否已登录，以便分别从 API 获取经过身份验证和未经身份验证的数据？

更新

当我成功登录（发布授权的电子邮件和密码）时，我会收到一个带有令牌的 json 响应，我在 cookie 中设置如下：

this.$cookie.set('my_auth_token', this.token, {expires: 15})

如何检索客户端 cookie 并进入 nuxt 服务器以进行服务器端渲染？

【问题讨论】：

当用户第一次登录时，您可以将令牌保存到用户浏览器的localstorage 中，并且每次用户加载您的应用程序时，您都可以在用户浏览器localstorage 中检查令牌，如果令牌如果存在，则可以发送GET 以检查令牌是否有效
@AmrAly 嗨！我已经更新了我如何实际检索令牌并将其设置在 cookie 或本地存储中的问题。我很困惑的是如何将客户端cookie放入nuxt服务器进行服务器端渲染？
嗨，本杰明，我已经搜索了您的问题，但不幸的是，SSR 中的身份验证是一个新的热门话题，并且没有简单的实施指南 - 据我所知 - 但我将不胜感激如果您与我们分享有关如何实施此功能的任何信息。
当您从浏览器向服务器发出请求时，cookie 会包含在请求标头中，因此您应该能够在服务器上获取和使用它们。
这个问题解决了吗？@BenjaminSmithMax

标签： authentication vue.js nuxt.js

【解决方案1】：

Cookie 通过middleware 在 (Express) Nuxt 服务器中公开。

具体来说，它们可以从req.headers.cookie 属性中读取。您可以在Nuxt documentation 中看到一个示例实现。

关于您的实现：使用 Node 从您的 API 获取特权数据似乎是将会话处理委托给单个服务（而不是两者）并为您的用户提供 SSR 的理想方式。

如果您选择在 Django 服务上实现会话处理，那么您需要通过将它们传递到您的 axios 请求标头来“转发”您的 cookie。

【讨论】：

【解决方案2】：

我使用 Firebase 身份验证做了类似的事情。 Github 上有一个 example project 以及 a blog entry 概述了应用程序中使用的重要文件和配置。

【讨论】：