vue axios 带token请求 封装

可以封装成一个axios实例，在实例中设置token的headers，然后在发起请求时使用该实例即可。以下是一个简单的封装示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    common: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
  }
});

export default instance;

在组件中使用该实例：

import api from './api';

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

注意，这里假设token使用Bearer方式传递，且存储在localStorage中。实际使用中需要根据接口文档和具体情况进行调整。

相关问题

vue封装axios接收token封装

在Vue中封装Axios并接收token的方法可以通过在请求头中设置Authorization字段来实现。以下是一个示例代码：

引用\[1\]:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
});

// 在请求发送前拦截请求，设置Authorization头部
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

在这个示例中，我们创建了一个名为instance的Axios实例，并设置了基本的URL和超时时间。然后，我们使用interceptors.request拦截器在每个请求发送前进行处理。在拦截器中，我们从localStorage中获取token，并将其添加到请求头的Authorization字段中。

接下来，您可以在Vue组件中使用这个封装好的Axios实例来发送请求。例如，您可以在methods中的方法中使用它：

引用\[2\]:

import request from "@/utils/request";

export default {
  methods: {
    meGet() {
      request.get("/api/v1/products", { name: 'aaa', age: 18 }).then((res) => {
        console.log("res", res);
      });
    },
    mePost() {
      let obj = { name: 108 };
      request.post("/api/v1/auth/login", obj).then((res) => {
        console.log("res", res);
      });
    },
  },
};

在这个示例中，我们导入了封装好的request实例，并在methods中的方法中使用它来发送请求。由于我们在封装的Axios实例中已经设置了Authorization头部，所以在发送请求时会自动携带token。

请注意，您需要根据您的实际情况进行适当的调整和修改，比如根据您的API地址和token存储方式来设置baseURL和获取token的逻辑。
#### 引用[.reference_title]
- *1* *2* *3* [vue封装axios](https://blog.csdn.net/weixin_47586598/article/details/126654288)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue封装axios携带token

在Vue中封装axios并携带token的方法如下所示：

首先，在.env.development和.env.production文件中定义VUE_APP_BASE_API变量，用于存储开发环境和生产环境的请求地址。这样，Vue会根据当前环境自动访问正确的接口地址前缀。\[1\]

接下来，在vue.config.js文件中配置代理，以便在开发环境中解决跨域问题。在devServer中添加proxy字段，将请求路径以"/api"开头的请求代理到指定的后台接口地址。同时，设置changeOrigin为true，以确保请求头中的Host字段与目标地址一致。最后，使用pathRewrite将请求路径中的"/api"替换为空字符串，以去除请求路径中的前缀。\[2\]

在代码中，需要携带token进行请求。通常，token是在登录成功后由后台返回的数据中获取的。在请求头中添加Authorization字段，并将token值作为其值传递给后台。此外，还需要传递pwd和client_time_sign两个参数，其中pwd是登录时后台返回的data中的数据，client_time_sign是一个时间戳，需要与后台的code码保持一致。如果验证不通过，可以使用router.push("/login")将用户重定向到登录页。\[3\]

综上所述，以上是在Vue中封装axios并携带token的方法。
#### 引用[.reference_title]
- *1* *2* [vue封装axios自动带上token](https://blog.csdn.net/h5xiaoyu/article/details/113311775)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue项目中加token或其它验证信息简单封装axios使用](https://blog.csdn.net/weixin_56723577/article/details/122875303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]