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 }