Question

我目前正在尝试使用VueJS将VueJS页面转换为NuxtJS。不幸的是，我在验证用户身份时遇到了一些问题，我在Google中找不到解决方案。我仅将Nuxt用于客户端。该API在表达上是完全独立的，并且可以与现有的VueJS网站一起使用。

在Nuxt中，我现在使用Auth模块将带有用户名和密码的请求发送到我的Express Server / Api。 Api接收数据，检查数据，然后在MongoDB中找到帐户。这完全可以正常工作。还是我认为应该的。现在，我获取用户对象并从中生成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 ...”。没有错误消息。

每次我提出请求（按“登录”按钮）时，我都会在Chrome Dev Tools的“网络”标签中获得4个新条目。两次“登录”，然后直接两次“用户”。

第一个“登录”条目如下（在“常规标题”中）：

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

第一个“用户”条目：

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

，响应是带有令牌的对象和用户对象。

第二个用户条目：

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

，响应是用户对象。

我认为对于登录，仅应与登录请求相关，否则我错了？用户请求之所以有效，是因为客户端请求了用户路线和用户路线，因此总是将答案与实际用户对象一起发送给我的Express API。

因为我认为问题出在登录响应中？这里是Chrome开发工具中“网络”标签中的一些屏幕截图，其中包含登录请求/响应。

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

我必须对Vuex商店做点事情吗？在使用google时使用身份验证模块的示例中，我从未发现任何已配置的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网站也使用了一些逻辑。当身份验证模块正常工作时，我将删除该地址。

随时询问更多信息。

Answer 1

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

我一直在搜索有关我的api响应的错误。问题是nuxt.config.js中用户端点上的“ propertyName”。

默认设置为“用户”。当我将其设置为“ propertyName：false”时，一切都会正常进行。

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

}，

如何使用Nuxt Auth模块在Vuex中保存JWT令牌？

1 个答案: