axios header 动态添加 token

解决方案：

非常简单，使用axios的拦截器，发送请求前从缓存中读取，没有则为空 （重要）。

官网方法：

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

 

我的问题：

我封装了一个基于axios的http类（欢迎补充）：

import axios from 'axios'
import storage from '../utils/storage'
import Vant from 'vant'
// import qs from 'qs'
import { config } from './config'

const tips = {
    1: '抱歉，出现了一个错误'
}

var instance = axios.create({
    baseURL: config.base_url
});

// 中文乱码解决
// instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 请求发起前拦截 使用qs序列化字符串，处理发送请求的参数


// 请求发前拦截，header中添加token
instance.interceptors.request.use(res => {
    res.headers.common['X-Token'] = storage.get('token') || ''
    return res;
});

class Http {

    // get 请求
    get(url, params) {
        const result = instance.get(url, { params: params })
        result.then(res => {
            if (res.data.message) {
                Vant.Toast.fail(res.message)
            }
        })
        return result
    }

    //post 请求
    post(url, params) {
        const result = instance.post(url, params)
        result.then(res => {
            // 请求打印出来 debug
            console.log(res)
            if (res.data.message) {
                Vant.Toast.fail(res.data.message)
            }
        })
        return result
    }

    // 发送 字符串类型
    postStr(url, params) {
        const headers = {
            'Content-type': 'application/x-www-form-urlencoded'
        }
        return instance.post(url, params, headers)
    }

    // 并发请求
    all(array, callback) {
        instance.all(array)
            .then(axios.spread(function (acct, perms) {
                callback({ acct, perms })
                // 两个请求现在都执行完成
            }));
    }

    // 展示良好的错误提示
    show_error(error_code) {
        if (!error_code) {
            error_code = 1
        }
        const tip = tips[error_code]
        Vant.Toast.fail(tip)
    }

}

export { Http }

 

转载于:https://www.cnblogs.com/likewpp/p/11098314.html