时间戳

首页 > 解决方案 > Nuxt Auth 中间件向用户端点发出空请求

vue.js - Nuxt Auth 中间件向用户端点发出空请求

问题描述

每个人。我正在尝试构建一个登录模块。我正在使用 Nuxt auth 来处理我的登录工作流程并为我的 RestAPI 使用烧瓶。nuxt.config.js我已经按照文档中的说明在我的文档中设置了身份验证选项，并将 URL 调整为我的烧瓶 API，如下所示：

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/users/username/', method: 'post', propertyName: 'User' }
        },
        // tokenRequired: true,
        // tokenType: 'bearer'
        // autoFetchUser: true
      }
    }
  }

这是我的登录组件：

<template>
  <div>
    <form @submit.prevent="userLogin">
      <div>
        <label>Username</label>
        <input type="text" v-model="login.username" />
      </div>
      <div>
        <label>Password</label>
        <input type="text" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: 'newUser27',
        password: 'ninjaTurtles1!'
      }
    }
  },
  methods: {
    async userLogin() {
      try {

        let response = await this.$auth.loginWith('local', { data: this.login })

        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

现在，我遇到的问题是，当我点击登录按钮以调用提交表单并调用我的登录函数时，对登录路由的调用成功，请求包含表单中的用户名和密码，并且我得到回复。如图所示：

请求正文和请求响应

但是，由于请求正文为空，所以调用用户端点失败，因此服务器无法处理请求，如下图所示： 调用用户端点时的请求正文为空。

我想我的问题是我是否有某种错误配置导致对用户端点的请求正文为空，从而未能在我的用户中长并保持为this.$auth.loggedIn假this.$auth.user。

我已经尝试过：

任何建议或帮助将不胜感激。

标签： vue.jsauthenticationflaskvuexnuxt.js

解决方案

根据登录端点，auth 必须接收'token'propertyName，但是在您的响应屏幕截图中显示的是您收到的'auth'属性作为响应，您应该更改后端以直接返回令牌属性（不是嵌套属性）或更改您的登录端点propertyName，您可以通过以下方式检查令牌设置是否正确称呼

console.log( this.$auth.getToken('local') );

推荐阅读