Jak*_*hne 5 authentication express jwt bearer-token nuxt.js
我目前正在尝试使用 VueJS 将 VueJS 页面转换为 NuxtJS。不幸的是，我在验证用户时遇到了一些问题，我在 Google 中找不到解决方案。我只为客户端使用 Nuxt。该 API 在 express 中是完全独立的，并且可以与现有的 VueJS 站点一起使用。
在 Nuxt 中，我现在使用 Auth 模块向我的 Express Server/Api 发送一个带有用户名和密码的请求。Api 接收数据，进行检查，然后在 MongoDB 中找到帐户。这完全按照它应该的方式工作。或者像我认为的那样。现在我获取用户对象并从中生成 jwt。我可以调试到这里的所有内容并且它可以工作。现在我可能只是不知道如何继续调试它。我将带有 res.json(user, token) 的答案发送回 Nuxt 客户端（代码如下）。正如我所说，在我当前的 VueJS 页面中，我也可以处理这个问题。同样在 Nuxt 页面中，我在开发控制台中看到了答案，据我所知，答案是合适的。
现在一些代码。express Api 上的登录部分：
const User = require('../models/User')
const jwt = require('jsonwebtoken')
const config = require('../config/config')
函数 jwtSignUser(user){
const ONE_YEAR = 60 * 60 * 24 * 365
返回 jwt.sign(user,config.authentication.jwtSecret, {
过期时间：ONE_YEAR
})
}
模块.出口 = {
异步登录（请求，资源）{
控制台.log(req.body)
尝试{
const {用户名，密码} = req.body
const user = await User.findOne({
用户名：用户名
})
如果（！用户）{
返回 res.status(403).send({
错误：`登录信息不正确。`
})
}
const isPasswordValid = await user.comparePassword(password)
如果（！isPasswordValid）{
返回 res.status(403).send({
错误：`登录信息不正确。`
})
}
const userJson = user.toJSON()
res.json({
用户：userJson，
令牌：jwtSignUser(userJson)
})
} 抓住（错误）{
控制台日志（错误）
res.status(500).send({
错误：`尝试登录时发生错误。`
})
}
}
}
nuxt.config.js：
授权：{
策略：{
当地的： {
端点：{
登录：{url：'/登录'，方法：'发布'}，
用户: {url: '/user', 方法: 'get' },
注销：假，
}
}
},
重定向：{
登录：'/个人资料'，
登出： '/'，
用户资料'，
打回来：'/'
}
}
甚至尝试使用几乎所有可能的“propertyName”。
最后但并非最不重要的是，我的 login.vue 上的方法：
异步登录（）{
尝试 {
console.log('正在登录...')
等待 this.$auth.loginWith('local', {
数据： {
“用户名”：this.username，
“密码”：this.password
}
}).catch(e => {
console.log('登录失败');
})
如果 (this.$auth.loggedIn) {
console.log('登录成功');
}
}抓住（e）{
console.log('用户名或密码错误');
console.log('错误：', e);
}
}
我在这里真的不明白......我总是在控制台中显示“登录......”。没有任何错误消息。
每次我提出请求（按登录按钮）时，我都会在 Chrome 开发工具的“网络”标签中获得 4 个新条目。两次“登录”，然后直接两次“用户”。
第一个“登录”条目如下（在通用标题中）：
请求地址：http://localhost:3001/login 请求方法：OPTIONS 状态码：204 无内容 远程地址：[::1]:3001 推荐人政策：降级时不推荐人
第一个“用户”条目：
请求地址：http://localhost:3001/user 请求方法：OPTIONS 状态码：204 无内容 远程地址：[::1]:3001 推荐人政策：降级时不推荐人
两者都没有任何回应。
第二个登录入口：
请求地址：http://localhost:3001/login 请求方式：POST 状态码：200 OK 远程地址：[::1]:3001 推荐人政策：降级时不推荐人
Response 是带有令牌和用户对象的对象。
第二个用户条目：
请求地址：http://localhost:3001/user 请求方式：GET 状态码：200 OK 远程地址：[::1]:3001 推荐人政策：降级时不推荐人
响应是用户对象。
我认为登录应该只有登录请求是相关的，还是我错了？并且用户请求有效，因为客户端已经要求用户路由和用户路由，总是在我的 Express API 中发送带有实际用户对象的答案。
因为我认为，问题出在登录响应上？这是 Chrome 开发工具中网络选项卡的一些屏幕截图，其中包含登录请求/响应。
我必须对我的 Vuex Store 做些什么吗？我从未在使用谷歌时使用身份验证模块的示例中找到任何配置的 Vuex 商店，所以我认为我不必在这里更改任何内容。
这是我尝试登录但没有成功后的 Vuex 商店（Chrome 中的 Vue 开发工具）：
{"navbar":false,"token":null,"user":null,"isUserLoggedIn":false,"access":false,"auth":{"user":"__vue_devtool_undefined__","loggedIn":false, "strategy":"local","busy":false},"feedType":"popular"}
还有一些逻辑用于我的实际 VueJS 站点。当 Auth 模块工作时，我将删除它。
@imreBoersma 提问：我在 Express 上的 /user 端点看起来像：
app.get('/用户',
已认证，
用户控制器.getUser)
我首先检查用户是否经过身份验证：
const 护照 = 要求（'护照'）
module.exports = function (req, res, next) {
护照.认证（'jwt'，功能（错误，用户）{
如果（错误 || ！用户）{
res.status(403).send({
错误：“您无权执行此操作。”
})
} 别的 {
req.user = 用户
下一个（）
}
})(请求，资源，下一个)
}
之后，我在 MongoDB 中搜索用户文档并将文档发送到客户端：
const User = require('../models/User')
模块.出口 = {
[...]
获取用户（请求，资源）{
User.findById(req.user._id, function (error, user){
如果（错误）{ 控制台错误（错误）；}
res.send（用户）
})
}
[...]
}
随时询问更多信息。
我想我可以回答我自己的问题。
我一直在搜索有关我的 api 响应的错误。问题"propertyName"在于 nuxt.config.js 中的用户端点。
它被设置"user"为默认值。当我将它设置为"propertyName: false",比一切正常时。
auth: {
strategies: {
local: {
endpoints: {
login: {url: '/login', method: 'post', propertyName: 'token' },
user: {url: '/user', method: 'get', propertyName: false },
logout: false,
}
}
}
},
| 归档时间： |
|
| 查看次数： |
10515 次 |
| 最近记录： |