如何将 axios 设置为 Nuxt.js 的默认原型并将令牌附加到默认的 axios 授权标头？

【问题标题】：How to set axios as a default prototype for Nuxt.js and append token to the default axios authorization header?如何将 axios 设置为 Nuxt.js 的默认原型并将令牌附加到默认的 axios 授权标头？
【发布时间】：2021-09-25 03:45:15
【问题描述】：

在 Vue.js 中，我们可以简单地将 axios 作为 Vue.js 的默认原型，并将本地存储令牌附加到 Vue main.js 文件中的默认 axios 授权标头。

如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$http = axios;
const token = localStorage.getItem("token");
if(token){
  Vue.prototype.$http.defaults.headers.common['Authorization'] = token;
}

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

我的问题是如何将 axios 设置为 Nuxt.js 的默认原型，并将本地存储令牌附加到 Nuxt.config.js 文件内的默认 axios 授权标头

【问题讨论】：

标签： axios local-storage nuxt.js nuxt-auth

【解决方案1】：

不确定原型是不是通常要走的路。

我确实为 Nuxt 推荐这款安装nuxt/axios 和
yarn add @nuxtjs/axios

然后，转到您的 Nuxt 配置
nuxt.config.js

plugins: ['@/plugins/nuxt-axios.js'],
modules: ['@nuxtjs/axios'],

并根据需要将配置设置为您的 axios
/plugins/nuxt-axios.js

export default ({ $axios }, $config: { authorizationToken }) => {
  $axios.defaults.headers.Authorization = authorizationToken
}

或者直接在配置文件中 nuxt.config.js

axios: {
  headers: {
    Authorization: process.env.TOKEN,
  },
},

如果你想了解更多关于环境变量的信息，你可以查看这个：https://stackoverflow.com/a/67705541/8816585

【讨论】：