zoukankan      html  css  js  c++  java
  • axios header 动态添加 token

    解决方案:

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

    非常简单,使用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 }
  • 相关阅读:
    FSLIB.NETWORK 简易使用指南
    在CentOS上安装owncloud企业私有云过程
    用于ViEmu的重置为试用状态的Python脚本
    Microsoft.Office.Interop.Excel 报错
    FineUIMvc表格数据库分页,使用CYQ.Data组件
    如何在已有项目中引入FineUIMvc
    按键精灵-常用脚本命令汇集
    微信分享代码
    [教程] 【原创】媒体扫描耗电的彻底解决办法(申精)
    Less学习笔记
  • 原文地址:https://www.cnblogs.com/likewpp/p/11098314.html
Copyright © 2011-2022 走看看