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

Posted 2023-03-16

【中文标题】Vue Axios 本地存储的令牌未定义

【英文标题】：Vue Axios local stored token is undefined

【发布时间】：2019-08-15 13:36:32

【问题描述】：

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

有很多建议，我都试过了。抽动，逗号等。谁看到大局？

【参考方案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

【讨论】：

仍然未定义且不可用

【参考方案2】：

我添加了数字漂移器的代码，并通过更改 Vue 中的挂载函数解决了问题（在帮助下）。

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