vue设置token

### 在 Vue.js 中正确配置和使用 Token 在 Vue.js 项目中，Token 的配置通常用于身份验证和授权操作。以下是关于如何通过 Axios 和 Vue 插件来实现这一目标的具体方法。 #### 单个组件中的 Token 配置 如果仅需在一个特定的组件中添加 Token，则可以通过 Axios 实例手动设置请求头。例如： ```javascript methods: { fetchData() { const token = localStorage.getItem('token'); // 获取存储的 Token axios.get('/api/data', { headers: { 'Authorization': `Bearer ${token}` } // 设置请求头 }).then(response => { console.log(response.data); }); } } ``` 这种方法适用于局部场景下的 API 调用[^1]。 #### 全局 Token 配置 为了在整个应用中统一管理 Token，推荐创建一个 Axios 实例并将其挂载到 Vue 原型链上或作为插件引入。具体步骤如下： 1. **安装 Axios** 如果尚未安装 Axios，请先运行以下命令： ```bash npm install axios ``` 2. **创建 Axios 实例** 创建一个新的文件（如 `axiosInstance.js`），定义带默认配置的 Axios 实例。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // 使用环境变量指定基础 URL timeout: 5000, headers: { Authorization: '' // 初始化为空字符串 } }); // 添加请求拦截器，在每次发送请求前自动注入 Token instance.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); export default instance; ``` 3. **集成到 Vue 应用程序** 将自定义实例导入至主入口文件（如 `main.js` 或 `main.ts`）并与 Vue 绑定。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import api from './request/api'; // 自定义 Axios 实现路径 const app = createApp(App); app.config.globalProperties.$http = api; app.mount('#app'); ``` 此时可以在任何地方调用 `$http` 来发起带有认证信息的 HTTP 请求[^3]。 #### 存储与更新 Token 建议将获取到的新 Token 存入浏览器本地存储（Local Storage 或 Session Storage）。当用户成功登录后执行保存逻辑；登出时清除数据即可完成清理工作。 ```javascript // 登录接口返回新令牌后的处理函数 function handleLoginResponse(data) { const { accessToken } = data; localStorage.setItem('token', accessToken); // 更新当前用户的访问凭证 } // 注销账户的操作流程之一就是移除该字段 localStorage.removeItem('token'); ``` 以上即为一种标准做法以支持跨页面保持会话状态的同时简化开发过程。 ---