Get axios response with interceptor saving to localStorage

Question

EDIT: The reason this is not getting logged is because there is an interceptor that is saving auth headers to local storage. I need the response to continue through though so I can save user info. I put the interceptor code at the bottom.

I'm setting up a test with Vue2 and a Rails API and I'm running into a roadblock with logging the responses with axios. The request hits the API and the record is saved and when I look in Chrome I can see the response message.

Why is this still logging the response as undefined?

component method

methods: {
  submit() {
    const credentials = {
      email: this.credentials.email,
      user_name: this.credentials.user_name,
    };

    axios.patch(UPDATE_URL, credentials)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },

response from Chrome's network tab

{
  "status":"success",
  "data": {
    "id":1,
    "email":"[email protected]",
    "user_name":"padlsoaa",
    "provider":"email",
    "uid":"[email protected]",
    "image":"https://randomuser.me/api/portraits/women/1.jpg",
    "created_at":"2017-10-21T09:45:27.077Z",
    "updated_at":"2017-10-26T12:00:56.864Z",
    "deleted_at":null
  }
}

EDIT: interceptor saved in main.js

created() {
    axios.interceptors.request.use((config) => {
      config.headers.client = window.localStorage.getItem('client');
      config.headers['access-token'] = window.localStorage.getItem('access-token');
      config.headers.uid = window.localStorage.getItem('uid');
      config.headers['token-type'] = window.localStorage.getItem('token-type');

      return config;
    });

    axios.interceptors.response.use((response) => {
      if (response.headers.client) {
        localStorage.setItem('access-token', response.headers['access-token']);
        localStorage.setItem('client', response.headers.client);
        localStorage.setItem('uid', response.headers.uid);
        localStorage.setItem('token-type', response.headers['token-type']);
      }
    });
  },

I don't know if it matters, but I have also tried writing these with the older syntax so that they are exactly as they are in the GH documentation with the same result — oneWorkingHeadphone

oneWorkingHeadphone oneWorkingHeadphone · Accepted Answer · 2017-10-27T10:49:38

Silly mistake...You have to return the response in the interceptor or it will never reach the .then((response) => { }

axios.interceptors.response.use((response) => {
  if (response.headers.client) {
    localStorage.setItem('access-token', response.headers['access-token']);
    localStorage.setItem('client', response.headers.client);
    localStorage.setItem('uid', response.headers.uid);
    localStorage.setItem('token-type', response.headers['token-type']);
  }
  return response;
});

Get axios response with interceptor saving to localStorage

1 Answers