vue如何在请求头戴token

Vue在请求头中带上token的方法有以下几种：1、使用Axios拦截器；2、在每个请求中手动设置；3、使用Vuex进行状态管理。其中，使用Axios拦截器是最常见和推荐的方法，因为它能够自动为每个请求添加token，减少了手动设置的麻烦。

使用Axios拦截器来在请求头中带上token的具体步骤如下：

1. 安装Axios
2. 配置Axios拦截器
3. 在Vuex中管理token
4. 发起请求时自动带上token

一、安装Axios

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

npm install axios

或者
yarn add axios

二、配置Axios拦截器

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

import Vue from 'vue';

import App from './App.vue';
import axios from 'axios';
Vue.config.productionTip = false;
// 设置axios默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
new Vue({
  render: h => h(App),
}).$mount('#app');

在上面的代码中，我们首先从localStorage中获取token，并将其设置为Axios的默认请求头。然后，我们添加一个请求拦截器，在每次请求发起之前，都自动将token添加到请求头中。

三、在Vuex中管理token

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

npm install vuex

或者
yarn add vuex

接下来，在store.js文件中配置Vuex：

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: {
    updateToken({ commit }, token) {
      commit('setToken', token);
    },
    removeToken({ commit }) {
      commit('clearToken');
    },
  },
});

在上面的代码中，我们定义了一个Vuex store来管理token状态，并提供了更新和清除token的mutations和actions。

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

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

<template>

  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>
<script>
import axios from 'axios';
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions(['updateToken', 'removeToken']),
    async fetchData() {
      try {
        const response = await axios.get('/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

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

methods: {

  ...mapActions(['updateToken']),
  async login() {
    try {
      const response = await axios.post('/login', { username: 'user', password: 'pass' });
      const token = response.data.token;
      this.updateToken(token);
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } catch (error) {
      console.error(error);
    }
  },
}

通过这种方式，token会在每次请求时自动添加到请求头中，从而实现了在Vue中轻松管理和使用token的需求。

总结来说，在Vue项目中带上token最推荐的方法是使用Axios拦截器，因为它可以自动为每个请求添加token，减少了手动设置的麻烦。同时，通过结合Vuex来管理token，可以更好地维护应用状态，确保token的更新和清除操作得以顺利进行。

相关问答FAQs：

1. 为什么需要在请求头中携带Token？

在前后端分离的应用中，通常会使用Token来进行身份验证和授权。Token是一种无状态的身份验证机制，通过在每个请求的请求头中携带Token来验证用户的身份。这样可以避免使用传统的cookie和session机制，提高系统的可扩展性和安全性。

2. 如何在Vue中设置请求头携带Token？

在Vue中，可以使用axios库来发送HTTP请求。下面是设置请求头携带Token的步骤：

• 首先，安装axios库。可以通过npm或者yarn进行安装：

npm install axios

• 在需要发送请求的组件中，引入axios库：

import axios from 'axios';

• 设置axios的默认请求头，在main.js文件中添加以下代码：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

其中，token是保存用户登录信息的变量，可以从localStorage或者vuex中获取。

• 发送请求时，可以直接使用axios来发送请求，请求头会自动携带Token：

axios.get('/api/user/profile')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

3. 如何处理Token过期或无效的情况？

由于Token有过期时间，当Token过期或无效时，需要进行相应的处理。一种常见的做法是在前端拦截器中检查响应的状态码，如果返回401（未授权）或403（禁止访问），则跳转到登录页面重新登录。

在Vue中，可以使用axios的拦截器来实现这个功能。下面是处理Token过期或无效的步骤：

• 在main.js文件中添加以下代码，创建axios的拦截器：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401 || error.response.status === 403) {
    // 跳转到登录页面
    router.push('/login');
  }
  return Promise.reject(error);
});

• 当后端返回401或403状态码时，拦截器会跳转到登录页面。

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