写一个携带token的axios封装

好的，我可以回答这个问题。以下是一个携带token的axios封装的示例代码：

import axios from 'axios';

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

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;

这个封装使用了axios的拦截器，在每次请求发送前，会检查本地存储中是否有token，如果有，则在请求头中添加Authorization字段，值为Bearer加上token。这样就可以在请求中携带token了。

相关问题

把axios封装过后 有的接口需要携带token 有的接口不需要携带token,但是我已经全局携带token了

你可以在封装的axios请求中添加一个选项来区分需要携带token的接口和不需要携带token的接口。以下是一个示例代码：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前对config进行处理
    const token = getToken(); // 获取token，可以根据自己的实现进行修改
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 设置token
    }
    return config;
  },
  (error) => {
    // 请求错误处理
    console.error('请求拦截器错误:', error);
    return Promise.reject(error);
  }
);

// 封装的get请求方法
export function get(url, params) {
  return instance.get(url, { params });
}

// 封装的post请求方法
export function post(url, data) {
  return instance.post(url, data);
}

在这个示例中，我们通过请求拦截器对所有的请求进行处理，在发送请求之前判断是否有token，如果有则在请求头中添加Authorization字段。这样你可以在调用API时，根据需要选择是否携带token。

请注意，上述示例代码仅供参考，具体的实现方式可能因你的项目结构和需求而有所不同。

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 ]