如何解决如何将 axios 设置为 Nuxt.js 的默认原型并将令牌附加到默认的 axios 授权标头?
在 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 授权标头
解决方法
不确定原型是否是通常要走的路。
我确实为 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,},
如果您想了解有关 env 变量的更多信息,可以查看以下内容:https://stackoverflow.com/a/67705541/8816585
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。