如何使用 Nuxt Auth Module 在 Vuex 中保存 JWT Token？

Question

我目前正在尝试使用 VueJS 将 VueJS 页面转换为 NuxtJS。不幸的是，我在验证用户时遇到了一些问题，我无法在 Google 中找到解决方案。我只为客户端使用 Nuxt。 API 在 express 中完全独立，并与现有的 VueJS 站点一起工作。

在 Nuxt 中，我现在使用 Auth 模块向我的 express Server/Api 发送一个带有用户名和密码的请求。 Api 收到数据，检查它，并找到 MongoDB 中的帐户。这完全可以正常工作。或者我认为应该如此。现在我获取用户 object 并从中生成 jwt。我可以调试到这里为止的所有内容并且它有效。现在我可能只是不知道如何继续调试它。我将带有 res.json(user, token) 的答案发送回 Nuxt 客户端（代码如下）。正如我所说，在我当前的 VueJS 页面中，我也可以处理这个问题。同样在 Nuxt 页面中，我在开发控制台中看到了答案，据我所知答案是合适的。

现在是一些代码。快递上的登录部分Api:


    const User = require('../models/User')
    const jwt = require('jsonwebtoken')
    const config = require('../config/config')

    function jwtSignUser(user){
        const ONE_YEAR = 60 * 60 * 24 * 365
        return jwt.sign(user,config.authentication.jwtSecret, {
            expiresIn: ONE_YEAR
        })
    }
    module.exports = {
        async login (req, res){
            console.log(req.body)
            try{
                const {username, password} = req.body
                const user = await User.findOne({
                    username: username
                })

                if(!user){
                    return res.status(403).send({
                        error: `The login information was incorrect.`
                    })
                }

                const isPasswordValid = await user.comparePassword(password)
                if(!isPasswordValid) {
                    return res.status(403).send({
                        error: `The login information was incorrect.`
                    })
                }

                const userJson = user.toJSON()
                res.json({
                    user: userJson,
                    token: jwtSignUser(userJson)
                })

            } catch (err) {
                console.log(err)
                res.status(500).send({
                    error: `An error has occured trying to log in.`
                })
            }
        }
    }

nuxt.config.js:


    auth: {
        strategies: {
          local: {
            endpoints: {
              login: {url: '/login', method: 'post' },
              user: {url: '/user', method: 'get' },
              logout: false,
            }
          }
        },
        redirect: {
          login: '/profile',
          logout: '/',
          user: '/profile',
          callback:'/'
        }
      }

甚至尝试了几乎所有可能的方法 "propertyName"。

最后但同样重要的是，我的 login.vue:

上的方法



    async login() {
          try {
            console.log('Logging in...')
            await this.$auth.loginWith('local', {
              data: {
                "username": this.username,
                "password": this.password
              }
            }).catch(e => {
              console.log('Failed Logging In');
            })
            if (this.$auth.loggedIn) {
              console.log('Successfully Logged In');
            }
          }catch (e) {        
            console.log('Username or Password wrong');
            console.log('Error: ', e);
          }
        }

我在这里真的不明白...我总是在控制台中显示 "Loggin in..."。 None 个错误消息。

每次我发出请求（按登录按钮）时，"Network" 开发工具中的 "Network" 标签中都会出现 4 个新条目。两次 "login" 之后直接两次 "user".

第一个"login"条目如下（在一般Headers）：

Request URL: http://localhost:3001/login
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:3001
Referrer Policy: no-referrer-when-downgrade

第一个 "user" 条目：

Request URL: http://localhost:3001/user
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:3001
Referrer Policy: no-referrer-when-downgrade

两者都没有任何反应。

第二个登录入口：

Request URL: http://localhost:3001/login
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:3001
Referrer Policy: no-referrer-when-downgrade

并且响应是 object 以及令牌和用户 object。

第二个用户条目：

Request URL: http://localhost:3001/user
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3001
Referrer Policy: no-referrer-when-downgrade

响应是用户 object。

我认为对于登录应该只有登录请求是相关的，或者我错了？并且用户请求有效，因为客户端已请求用户路由和用户路由，始终在我的 Express API.

中发送带有实际用户 object 的答案

因为我认为，问题出在登录响应中？这是 Chrome 开发工具中网络选项卡的一些屏幕截图，其中 Request/Response 用于登录。

First login request without response
Second login request
Response to second login request

我必须对我的 Vuex 商店做些什么吗？在使用 google 时，我从未在使用 Auth 模块的示例中找到任何已配置的 Vuex Stores，所以我认为我不必在此处进行任何更改。

这就是我的 Vuex 商店（Chrome 中的 Vue Dev Tools）尝试登录失败后：

{"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('/user', 
            isAuthenticated,
            UsersController.getUser)

我首先检查用户是否已通过身份验证：


    const passport = require('passport')

    module.exports = function (req, res, next) {
        passport.authenticate('jwt', function (err, user) {
            if(err || !user) {
                res.status(403).send({
                    error: 'You are not authorized to do this.'
                })
            } else {
                req.user = user
                next()
            }
        })(req, res, next)
    }

之后我在MongoDB中搜索用户文档并将文档发送给客户端：


    const User = require('../models/User')

    module.exports = {
        [...]
        getUser (req, res) {
            User.findById(req.user._id, function (error, user){
                if (error) { console.error(error); }
                res.send(user)
            })
        }
        [...]

    }

欢迎随时询问更多信息。

Answer 1

我想我可以回答我自己的问题。

我一直在搜索关于我的 api 回复的错误。问题是 nuxt.config.js.

中用户端点上的 "propertyName"

默认设置为"user"。当我将它设置为 "propertyName: false", 时，一切正常。

 auth: {
    strategies: {
      local: {
        endpoints: {
          login: {url: '/login', method: 'post', propertyName: 'token' },
          user: {url: '/user', method: 'get', propertyName: false },
          logout: false,
        }
      }
    }
  },

如何使用 Nuxt Auth Module 在 Vuex 中保存 JWT Token？

How to save JWT Token in Vuex with Nuxt Auth Module?

authentication

express

jwt

bearer-token

nuxt.js