nuxtjs和后端API之间的授权

认证 Vue.js

小小Stafan宝儿

2020-03-23

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

问题:

当用户导航至应用程序时,我想检查用户是否已通过身份验证。如果用户已通过身份验证,请呈现已通过身份验证的页面。如果没有,则显示未认证的页面。

我的想法:

从上的App提取完成后AsyncData function,我会检查cookie是否有任何值。如果存在,则发送带有请求的授权标头的令牌。但是,由于页面将首先在服务器上呈现,而不是在客户端(cookie实际所在的位置)呈现,因此它将永远找不到授权令牌。

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

更新资料

成功登录后(发布授权的电子邮件和密码),我会收到带有令牌的json响应,该令牌是在cookie中设置的,如下所示:

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

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

第2706篇《nuxtjs和后端API之间的授权》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
小胖Gil 2020.03.23

我使用Firebase身份验证做了类似的事情。Github上有一个示例项目,以及一个博客条目,概述了应用程序中使用的重要文件和配置。

GO 2020.03.23

Cookies通过中间件在(Express)Nuxt服务器中公开

具体来说,可以从req.headers.cookie属性中读取它们您可以在Nuxt文档中看到此示例实现

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

如果您选择在Django服务上实现会话处理,则需要通过将cookie传递到axios请求标头中来“转发” cookie

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android