vue axios 封装 请求拦截

创建request文件夹(与src同级)
在request文件夹下—-创建http.js

将登陆时后台返回的token 存在sessionStorage 中

import axios from 'axios';
import store from "../store"
import router from "../router"

// axios.defaults.timeout = 5000;//请求超时
axios.defaults.baseURL ='';

//---------------------------------------------------------------------------------------------------
//http request 拦截器
axios.interceptors.request.use(
  config => {
    config.headers = {
      'content-type':'application/x-www-form-urlencoded'//form data格式 登陆接口 根据后台数据格式要求选择正确的方式
     };
    if(sessionStorage.getItem('token')){     //存在session
      config.headers = {
        'content-type':'application/json', //  json格式
        'token':sessionStorage.getItem('token')   //请求头中统一添加token
      }
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.code=="SenseTime0001"){     //后台返回的状态 是 需要登陆时
      sessionStorage.removeItem('token');         //删除token
      router.push({                              //返回登陆页面
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    if(error.response){
      switch (error.response.status){
        case 401:
          store.commit('del_token');
          router.push({
            path:"/login",
            querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
          })
      }
    }
    return Promise.reject(error.response)
  }
)
/**
 * 封装post请求
 * @param url    String
 * @param data   Object
 * @returns {Promise}
 */

export function post(url,data={}){
  return new Promise((resolve,reject) => {
    axios.post(url,data)
      .then(response => {
        resolve(response);
      },err => {
        reject(err)
      })
  })
}
/**
 * 封装get方法
 * @param url        String
 * @param data        Object
 * @returns {Promise}
 */
export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}

猜你喜欢

转载自blog.csdn.net/qq_42842709/article/details/82079859