token is missing in my vue app

Question

I have this response with httpie when an user is logged:

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"
}

The object is persisted in my database.

However when i make this request with axios from my vue.js form I get nothing in localStorage

this is my axios.js code:

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
  }
})

the object is persisted in database right but i get Authorization:Bearer undefined

these are my headers: Response:

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

Request:

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.

Request payload

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

This is my vue script component:

<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>

I'm getting Sign up failed, However the object is persisted in database. My back-end is ruby on rails. How can i receive in my data.token in payload?

This is my main.js file

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/>'
})

This is my vue-axios/index.js file:

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

import axios from './axios'

Vue.use(VueAxios, axios)

Updated The problem was in req. it's res to receive the token instead of 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");
    },
    .
    .
    .
    .

Thank you

DobleL DobleL · Accepted Answer · 2018-03-16T21:14:55

Try to set the token on every request with axios.interceptors

Put this on the main.js file so everywhere you import axios will have the config

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
})

I think that the problem is that axios.create instance is executed (created) just 1 time (then reference it), and not every time you import it, so if there was no token when the instance was created it will not work

token is missing in my vue app

2 Answers