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

Question

在Vue.js中，我们可以简单地将axios作为Vue.js的deafault原型，并将本地存储令牌附加到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授权标头

Answer 1

不确定原型是否是通常的做法。

我向Nuxt推荐这个使用
yarn add @nuxtjs/axios安装nuxt/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,
},
},

---

如果您希望获得有关env变量的更多信息，您可以检查以下内容：https://stackoverflow.com/a/67705541/8816585