我的 vue 应用程序中缺少令牌答案

【问题标题】：token is missing in my vue app我的 vue 应用程序中缺少令牌
【发布时间】：2018-08-26 00:53:27
【问题描述】：

当用户登录时，我通过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>

我收到注册失败，但是该对象已保存在数据库中。我的后端是 ruby on rails。如何在我的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");
    },
    .
    .
    .
    .

谢谢

【问题讨论】：

标签： javascript ruby-on-rails vue.js axios

【解决方案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 实例仅执行（创建）1 次（然后引用它），而不是每次导入它时，所以如果创建实例时没有令牌，它不会工作

【讨论】：

谢谢，但是我应该为这段代码创建一个文件吗？在 main.js 文件中出现语法错误：谢谢

【解决方案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");
    },
    .
    .
    .
    .

【讨论】：