Vue中如何给请求加token_中给请求头添加_Vue中如何给请求头添加token

Vue中如何给请求头添加token？

方法概述

在Vue中给请求头添加token主要有三种方法：

• 使用Axios拦截器
• 在每个请求中手动设置
• 使用Vuex进行状态管理

其中，使用Axios拦截器是最常见和推荐的方法，因为它能自动为每个请求添加token，减少了手动设置的麻烦。

使用Axios拦截器添加token的具体步骤

一、安装Axios

我们需要在项目中安装Axios。你可以通过npm或yarn来安装它：

二、配置Axios拦截器

在Vue项目的main.js文件中，配置Axios拦截器以便在每个请求中自动添加token：

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

三、在Vuex中管理token

为了更好地管理token，我们可以使用Vuex来存储和更新token。安装Vuex：

npm install vuex 

然后，在store.js文件中配置Vuex：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { token: null }, mutations: { setToken(state, token) { state.token = token; }, clearToken(state) { state.token = null; } }, actions: { updateToken({ commit }, token) { commit('setToken', token); }, clearToken({ commit }) { commit('clearToken'); } } }); 

四、发起请求时自动带上token

在组件中使用Axios发起请求时，token会自动添加到请求头中：

import axios from 'axios'; export default { methods: { fetchData() { axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } } 

当用户登录或获取新token时，可以调用Vuex的updateToken action来更新token：

this.$store.dispatch('updateToken', newToken); 

通过以上步骤，我们可以在Vue中方便地设置请求头携带Token，并处理Token过期或无效的情况。这样可以实现安全可靠的身份验证和授权机制。