Локальный сохраненный токен Vue Axios не определен

Question

В Vue я создаю небольшую страницу Userprofile. Он построен на токен-аутентификации с использованием Axios. При монтировании этой страницы токен не определен.

с логином токен помещается в локальное хранилище.

Запрос Axios Get создается вне компонента Vue

Api.js

import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: `http://localhost:8081/`
  })
}

Получить запрос

import Api from '@/services/Api'

let config = {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': localStorage.getItem('token')
  }
}

export default {
  index () {
    return Api().get('user/profile', config)
  }
}

1024 * Вю *

<script>
export default {
  data: () => ({
    user: {}
  }),
  mounted () {
    this.user = UserProfileService.index
    console.log(UserProfileService.config)
  }
}
</script>

Есть много советов, и я попробовал их все. С тиками, с запятыми и т. Д. Кто видит большую картинку?

Answer 1

Используйте перехватчик запросов для установки заголовка авторизации:

// Api.js
export default () => {
  const instance = axios.create({
    baseURL: `http://localhost:8081/`
  })

  instance.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')

    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }

    return config
  }, function (error) {
    // Do something with request error
    return Promise.reject(error)
  })

  return instance
}

Answer 2

Я добавил код из цифрового дрифтера и решил (с помощью) проблему с изменением смонтированной функции в Vue.

mounted () {
    console.log('mounted')
    UserProfileService.index()
      .then((res) => {
        this.user = res.data
      })
  }