vue3 全局token的做法

在 Vue3 中，可以将全局的 token 存储在一个名为 `provide/inject` 的全局 API 中。`provide/inject` 可以让父组件向子组件传递数据，而不必一层一层地传递。这些数据可以在整个应用程序中使用，类似于全局变量。

具体的做法如下：

1. 在 `main.js` 中，使用 `provide` 来提供一个名为 `token` 的变量，该变量存储你的全局 token：

import { createApp, provide } from 'vue'
import App from './App.vue'

const app = createApp(App)

provide('token', 'your_global_token_here')

app.mount('#app')

2. 在需要使用全局 token 的组件中，使用 `inject` 来注入 `token` 变量：

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const token = inject('token')
    // 在这里可以使用 token 变量
  }
})

这样，你就可以在整个应用程序中使用 `token` 变量了，而不必每次都传递它。同时也避免了全局变量污染和命名冲突的问题。

相关问题

vue项目全局token, jquery

对于 Vue 项目中的全局 token，可以使用 Vue 的插件机制将其注入到 Vue 实例中，从而在整个项目中都可以使用该 token，例如：

// 创建一个 Vue 插件
const TokenPlugin = {
  install(Vue) {
    Vue.prototype.$token = "your-global-token";
  }
};

// 在 Vue 项目中使用该插件
Vue.use(TokenPlugin);

// 在组件中使用全局 token
export default {
  created() {
    console.log(this.$token); // 输出 "your-global-token"
  }
};

至于 jQuery，它是一个独立的 JavaScript 库，不依赖于 Vue。如果你需要在 Vue 项目中使用 jQuery，可以通过以下两种方式之一：

1. 在 HTML 文件中直接引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后在 Vue 组件中使用全局变量 `$` 来调用 jQuery 方法，例如：

export default {
  created() {
    $("body").css("background-color", "red");
  }
};

2. 使用 npm 安装 jQuery，并在 Vue 组件中导入：

npm install jquery

import $ from "jquery";

export default {
  created() {
    $("body").css("background-color", "red");
  }
};

注意，使用 jQuery 时需要注意它的版本兼容性问题，尽量使用最新版本的 jQuery。另外，Vue 推荐使用它自带的 DOM 操作方法，如 `this.$refs`、`this.$el` 等，尽量减少对 jQuery 的依赖。

vue3 axios 全局加载token

可以在main.js中使用axios的拦截器，在请求头中添加token：

import axios from 'axios'

axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)

然后在每个需要使用axios的组件中，直接使用axios即可。