vue如何请求接口带token

在Vue中请求接口时带上token有以下几种方式：1、在请求头中添加token，2、在请求参数中添加token，3、使用拦截器统一添加token。以下将详细介绍这些方法。

一、在请求头中添加token

在Vue项目中，我们经常使用axios来处理HTTP请求。我们可以在请求头中添加token进行身份验证。

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});
// 获取token
const token = localStorage.getItem('token');
// 设置请求头
instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
// 使用axios实例发送请求
instance.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

详细解释：

1. 创建一个axios实例，并配置基础URL和超时时间。
2. 从localStorage中获取存储的token。
3. 将token添加到请求头的Authorization字段中。
4. 使用配置好的axios实例发送请求。

二、在请求参数中添加token

有时候，我们可能需要将token作为请求参数传递。

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});
// 获取token
const token = localStorage.getItem('token');
// 使用axios实例发送请求
instance.get('/user', {
  params: {
    token: token
  }
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

详细解释：

1. 从localStorage中获取存储的token。
2. 在发送请求时，将token作为请求参数传递。

三、使用拦截器统一添加token

拦截器可以在请求或响应被then或catch处理前拦截它们。可以在请求拦截器中统一添加token。

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});
// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 获取token
  const token = localStorage.getItem('token');
  // 如果token存在，则将其添加到请求头
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});
// 使用axios实例发送请求
instance.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

详细解释：

1. 创建一个axios实例。
2. 添加请求拦截器，在发送请求前获取token并将其添加到请求头中。
3. 在请求拦截器中处理可能的错误。
4. 使用配置好的axios实例发送请求。

四、实例说明

下面是一个完整的Vue组件示例，展示了如何在Vue组件中使用axios请求接口并带上token。

<template>

  <div>
    <button @click="fetchUserData">获取用户数据</button>
    <div v-if="userData">
      <h3>用户数据</h3>
      <pre>{{ userData }}</pre>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      userData: null,
    };
  },
  methods: {
    async fetchUserData() {
      try {
        const token = localStorage.getItem('token');
        const response = await axios.get('https://api.example.com/user', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        this.userData = response.data;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>
<style scoped>
button {
  margin-bottom: 20px;
}
</style>

详细解释：

1. 在Vue组件的data中定义userData用于存储用户数据。
2. 在methods中定义fetchUserData方法来发送请求并获取用户数据。
3. 在请求中添加token到请求头中。
4. 将获取到的数据赋值给userData。

总结：本文介绍了在Vue中请求接口时带上token的几种常见方法，包括在请求头中添加token、在请求参数中添加token，以及使用axios拦截器统一添加token。根据具体需求选择合适的方法，并确保token的安全性和正确性。希望这些方法能够帮助你更好地在Vue项目中处理带token的接口请求。

相关问答FAQs：

1. Vue如何发送带Token的请求？

在Vue中发送带Token的请求可以通过设置请求头的方式来实现。以下是一种常见的实现方式：

import axios from 'axios';

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

// 发送请求
axios.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

在上述代码中，我们使用了axios库来发送请求。首先，我们通过设置axios.defaults.headers.common['Authorization']来设置默认的请求头，其中token是你的用户令牌。然后，我们发送GET请求到/api/data接口，并在then方法中处理响应数据，在catch方法中处理错误。

2. 如何在Vue中存储和使用Token？

在Vue中，你可以使用localStorage或sessionStorage来存储和使用Token。以下是一个示例：

// 存储Token
localStorage.setItem('token', 'your_token');

// 获取Token
const token = localStorage.getItem('token');

// 使用Token发送请求
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

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

在上述代码中，我们使用localStorage.setItem('token', 'your_token')将Token存储在本地存储中。然后，我们可以使用localStorage.getItem('token')获取存储的Token。最后，我们通过设置请求头的方式将Token添加到请求中。

3. 如何判断Token是否过期？

要判断Token是否过期，你可以在前端实现一个Token过期验证的机制。以下是一个示例：

// 检查Token是否过期
function isTokenExpired() {
  const token = localStorage.getItem('token');
  if (!token) {
    return true; // 如果Token不存在，则认为已过期
  }

  const expiration = getTokenExpiration(token);
  const currentTimestamp = Date.now() / 1000; // 当前时间的时间戳

  return expiration < currentTimestamp; // 如果Token的过期时间小于当前时间戳，则认为已过期
}

// 获取Token的过期时间
function getTokenExpiration(token) {
  const decodedToken = jwt_decode(token);
  return decodedToken.exp;
}

// 使用Token发送请求
if (!isTokenExpired()) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

  axios.get('/api/data')
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      // 处理错误
    });
} else {
  // Token已过期，需要重新登录或刷新Token
}

在上述代码中，我们定义了一个isTokenExpired函数来检查Token是否过期。首先，我们通过localStorage.getItem('token')获取存储的Token。然后，我们使用jwt_decode库解码Token，并获取到过期时间。最后，我们将过期时间与当前时间戳进行比较，如果过期时间小于当前时间戳，则认为Token已过期。根据判断结果，我们可以发送请求或执行其他操作。