vue请求接口时如何带着token

在Vue项目中请求接口时携带token，可以通过以下几种方式来实现：1、使用Axios拦截器、2、在请求配置中添加token、3、通过Vuex管理token、4、在组件中直接添加token。其中，使用Axios拦截器 是较为推荐的方式，因为它可以集中管理token的添加，代码更加简洁和统一。

一、使用AXIOS拦截器

使用Axios拦截器是最常见且推荐的方法，因为它可以在请求发送之前统一处理token的添加，减少代码重复。具体步骤如下：

1. 安装Axios
2. 配置Axios拦截器
3. 在请求头中添加token

1. 安装Axios

首先，确保项目中已经安装了Axios。如果没有安装，可以通过npm或yarn进行安装：

npm install axios

或者
yarn add axios

2. 配置Axios拦截器

在Vue项目的入口文件（如main.js或app.js）中配置Axios拦截器：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API基地址
  timeout: 10000,
});
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token'); // 从localStorage中获取token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 将token添加到请求头中
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
export default instance;

3. 在请求头中添加token

在需要发送请求的地方使用配置好的Axios实例：

import axiosInstance from './path-to-axios-instance';

// 示例请求
axiosInstance.get('/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

二、在请求配置中添加TOKEN

如果你的项目不使用Axios拦截器，也可以在每次请求时手动添加token到请求配置中。这种方法比较适用于小型项目或特定场景。

import axios from 'axios';

const token = localStorage.getItem('token'); // 从localStorage中获取token
axios.get('https://api.example.com/user', {
  headers: {
    Authorization: `Bearer ${token}`
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

三、通过VUEX管理TOKEN

在大型项目中，可以使用Vuex来集中管理token，并在请求时从Vuex中获取token。

1. 创建Vuex Store

在Vue项目中创建一个Vuex Store来管理token：

import Vue from 'vue';

import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    clearToken(state) {
      state.token = '';
      localStorage.removeItem('token');
    }
  },
  actions: {
    saveToken({ commit }, token) {
      commit('setToken', token);
    },
    removeToken({ commit }) {
      commit('clearToken');
    }
  },
  getters: {
    token: state => state.token
  }
});

2. 在请求中使用Vuex中的TOKEN

在需要发送请求的地方，从Vuex中获取token并添加到请求配置中：

import axios from 'axios';

import store from './path-to-store';
const token = store.getters.token;
axios.get('https://api.example.com/user', {
  headers: {
    Authorization: `Bearer ${token}`
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

四、在组件中直接添加TOKEN

在一些特定情况下，你可以在组件中直接添加token到请求配置中。这种方法通常用于简单的项目或者临时性的请求。

<template>

  <div>
    <!-- 你的模板代码 -->
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'YourComponent',
  methods: {
    fetchData() {
      const token = localStorage.getItem('token'); // 从localStorage中获取token
      axios.get('https://api.example.com/user', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

总结

以上介绍了在Vue项目中请求接口时携带token的几种方法，包括使用Axios拦截器、在请求配置中添加token、通过Vuex管理token和在组件中直接添加token。对于大型项目，推荐使用Axios拦截器或Vuex管理token的方式，这样可以集中管理，代码更加简洁和统一。对于小型项目或特定场景，可以直接在请求配置中或组件中添加token。根据项目的具体需求选择合适的方法，可以有效地管理和使用token，提高代码的可维护性和安全性。

相关问答FAQs：

1. 如何在Vue中发送带有Token的请求？
在Vue中发送带有Token的请求非常简单。你可以使用axios库来发送请求，并在请求头中添加Token。以下是一个示例：

import axios from 'axios';

// 设置默认的请求头
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

// 发送带有Token的请求
axios.get('http://api.example.com/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的代码中，我们首先使用axios.defaults.headers.common设置了默认的请求头，将Token添加到Authorization字段中。然后，我们使用axios.get方法发送GET请求，并在请求的URL中指定接口地址。这样，每次发送请求时，都会自动带上Token。

2. 如何在Vue中保存Token并在请求中使用？
要在Vue中保存Token并在请求中使用，你可以使用Vue的状态管理工具，例如Vuex。以下是一个基本的示例：

首先，在Vuex的store中定义一个状态，用于保存Token：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    }
  }
});

export default store;

然后，在Vue组件中使用this.$store.commit方法来保存Token：

// Login.vue
export default {
  methods: {
    login() {
      // 假设登录成功后获取到的Token为response.data.token
      this.$store.commit('setToken', response.data.token);
    }
  }
}

最后，在发送请求时，通过this.$store.state.token来获取保存的Token，并添加到请求头中：

// Data.vue
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.defaults.headers.common['Authorization'] = `Bearer ${this.$store.state.token}`;

      axios.get('http://api.example.com/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}

在上面的代码中，我们通过this.$store.state.token获取保存的Token，并在请求头中添加到Authorization字段中。这样，在发送请求时，就会自动带上Token。

3. 如何在Vue中处理Token过期或无效的情况？
当Token过期或无效时，你可以使用拦截器来处理这种情况。拦截器可以在请求发送前和响应返回后对请求和响应进行处理。以下是一个示例：

首先，在axios的配置中添加请求拦截器：

import axios from 'axios';

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

在上面的代码中，我们通过axios.interceptors.request.use添加了请求拦截器。在请求发送前，会先执行拦截器中的回调函数。在回调函数中，我们从localStorage中获取保存的Token，并将其添加到请求头的Authorization字段中。

然后，在axios的配置中添加响应拦截器：

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status === 401) {
      // Token过期或无效，进行相应处理
    }
    return Promise.reject(error);
  }
);

在上面的代码中，我们通过axios.interceptors.response.use添加了响应拦截器。在响应返回后，会先执行拦截器中的回调函数。在回调函数中，我们判断响应的状态码是否为401（Unauthorized）。如果是，说明Token过期或无效，可以进行相应的处理，例如跳转到登录页或重新获取Token。

通过以上的拦截器配置，当发送请求时，会自动在请求头中添加Token。当响应返回时，会自动处理Token过期或无效的情况。这样，你就可以方便地在Vue中处理Token相关的逻辑了。