axios设置请求头token_Vue网络请求

本文介绍如何在Vue项目中使用axios设置请求头,包含token的添加方法。通过引入network.request.js源码,详细阐述网络请求的配置过程。
摘要由CSDN通过智能技术生成

e0704d505debc2276dc4772b0469bce9.png

引入文件逻辑

7161759ab269b780e427c5bdcf7bf518.png

66c1575f1039e05971a8de7c80d998d8.png

network.request.js源码(网上查到的,忘记出处)

import Vue from 'vue'
import axios from 'axios'
// import router from "../../router"
// import { Message } from 'element-ui'
import qs from 'qs'

let token = ''
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置cookie
// axios.defaults.headers.common['Authorization '] = token
// 配置请求头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// axios.defaults.headers.post['Content-Type'] = 'application/json'
// 静态资源
Vue.prototype.$static = ''
// 配置接口地址
axios.defaults.baseURL = ''
/* let loadingInstance */
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(config => {
  
  token=sessionStorage.getItem('TOKEN');
  config.headers.common['Authorization'] =token;
  //请求头转换为表单形式
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
  config.transformRequest = [function (data) {
    // 在请求之前对data传参进行格式转换
    data = qs.stringify(data)
    return data
  }]
  return config
}, err => {
  // Message.error('请求!');
  return Promise.reject(err)
})
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(res => {
  if (res.data.code === 0||res.data.code === 200) {
    return res
  } 
  else if (res.data.code==1||res.data.code==401){
    localStorage.clear();
    // Message.error(res.data.msg);
    console.log(res.data);
    // alert(res.data.msg);
    sessionStorage.clear();
  //  router.push('/');
  }
  else {
  //  Message.error(res.data.msg);
  console.log(res);
  // alert(res.data.msg);
  }
}, err => {
  return Promise.reject(err)
})
// post请求
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
// get请求
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
// put请求
export function put (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

// delete请求
export function cut (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值