Question

当用户登录时，我的回复为httpie：

chat-api$ http :3000/signup username=tomatito password=123
HTTP/1.1 201 Created
Cache-Control: max-age=0, private, must-revalidate
Content-Type: application/json; charset=utf-8
ETag: W/"01dfe24bd7415e252b5aee50e12198a3"
Transfer-Encoding: chunked
Vary: Origin
X-Request-Id: a095148b-592a-4347-820f-63e1efa0e409
X-Runtime: 0.347726

{
    "auth_token": "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo1LCJleHAiOjE1MjEzMTg4NDV9.45JDA7vk-K8gUzCB1xABKMifi-IWGoVESedKykGiqGo", 
    "message": "Account created successfully"
}

该对象保存在我的数据库中。

然而，当我从我的vue.js表单中使用axios发出此请求时， localStorage

这是我的 axios.js 代码：

import axios from 'axios'
const API_URL = process.env.API_URL || 'http://localhost:3000/'

export default axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.auth_token
  }
})

该对象在数据库中保留，但我得到Authorization:Bearer undefined

这些是我的标题：响应：

Access-Control-Allow-Methods:GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin:http://localhost:8081
Access-Control-Expose-Headers:
Access-Control-Max-Age:1728000
Cache-Control:max-age=0, private, must-revalidate
Content-Type:application/json; charset=utf-8
ETag:W/"fdac439f3ada9e343d0815bb49dff277"
Transfer-Encoding:chunked
Vary:Origin
X-Request-Id:9e318050-ceca-480c-a847-d59f9ebb18b7
X-Runtime:0.447976

请求：

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
Authorization:Bearer undefined
Connection:keep-alive
Content-Length:44
Content-Type:application/json
Host:localhost:3000
Origin:http://localhost:8081
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.75 Safari/537.

请求有效负载

{username: "tomatito", password: "123456"}
password:"123456"username:"tomatito"

这是我的vue脚本组件：

<script>
export default {
  name: 'SignUp',
  data () {
    return {
      username: '',
      password: '',
      error: false
    }
  },
  methods: {
    signup () {
      this.$http.post('/signup', { username: this.username, password: this.password })
      .then(request => this.signupSuccessful(request))
      .catch(() => this.signupFailed())
    },
    signupSuccessful (req) {
      if (!req.data.token) {
        this.signupFailed()
        return
      }
      localStorage.token = req.data.token
      this.error = false
      this.$router.replace(this.$route.query.redirect || '/rooms')
    },
    signupFailed () {
      this.error = 'Sign up failed!'
      delete localStorage.token
    }
  }
}
</script>

我正在注册失败，但是该对象会保留在数据库中。我的后端是铁轨上的红宝石。我怎样才能在我的data.token有效载荷中收到？

这是我的 main.js 文件

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './backend/vue-axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  axios,
  template: '<App/>'
})

这是我的 vue-axios / index.js 文件：

import Vue from 'vue'
import VueAxios from 'vue-axios'

import axios from './axios'

Vue.use(VueAxios, axios)

已更新问题出在 req 中。它是 res 来接收令牌而不是 req

signup() {
      this.$http
        .post("/signup", { username: this.username, password: this.password })
        .then(res => this.signupSuccessful(res))
        .catch(() => this.signupFailed());
    },
    signupSuccessful(res) {
      if (!res.data.auth_token) {
        this.signupFailed();
        return;
      }
      this.error = false;
      localStorage.token = res.data.auth_token;
      this.$store.dispatch("login");
      this.$router.replace(this.$route.query.redirect || "/rooms");
    },
    .
    .
    .
    .

谢谢

Answer 1

尝试使用axios.interceptors

在每个请求上设置令牌

将它放在main.js文件中，以便导入axios的任何地方都有配置

axios.interceptors.request.use(config => {
 const token= localStorage.getItem('my-token-key') // or where you have the token

 config.headers.common['Authorization'] = 'Bearer ' + token

 // you must return the config or it will not work
 return config
})

我认为问题是axios.create实例只执行（创建）一次（然后引用它），而不是每次导入它时，所以如果实例创建时没有令牌，将无法正常工作

Answer 2

已更新问题出在 req 中。它 res 接收令牌而不是 req

signup() {
      this.$http
        .post("/signup", { username: this.username, password: this.password })
        .then(res => this.signupSuccessful(res))
        .catch(() => this.signupFailed());
    },
    signupSuccessful(res) {
      if (!res.data.auth_token) {
        this.signupFailed();
        return;
      }
      this.error = false;
      localStorage.token = res.data.auth_token;
      this.$store.dispatch("login");
      this.$router.replace(this.$route.query.redirect || "/rooms");
    },
    .
    .
    .
    .

我的vue应用

2 个答案: