Vue Axios本地存储的令牌未定义

Question

在Vue中，我正在构建一个小的Userprofile页面。它基于使用Axios进行的令牌身份验证。装入此页面时，令牌未定义。

带有登录名的

令牌放置在localStorage中。

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

Vue

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

有很多建议，我都尝试过。抽搐，逗号等。谁能看到大图景？

Answer 1

使用请求拦截器设置Authorization标头：

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