vue axios api拆分以及axios token验证配置

vue学了两天,就被拉起来搭框架 ,说实话有点懵,一边查资料,一边加入点自己得思路终于勉强搞定。

axios配置

import axios from 'axios';
import {router} from '../router/index';
import { Message } from 'element-ui';
export let configtoJson={ //JSON格式数据
  headers: {
    'Content-Type': 'application/json',
  }
}
export let configtoFormData={ //formData格式
  headers: {
    'Content-Type': 'multipart/form-data',
  }
}



//设置全局请求超时时间
axios.defaults.timeout=12000
//设置全局token,登陆用
export  function setToken(token){
  return  axios.defaults.headers.common['token'] = token;
}
// request拦截
axios.interceptors.request.use(
  config => {
  //不想被拦截得话,悄悄咪咪加个token上去
   //config.headers.common['token']="JIx6uaDK3ZMR5ZPwSnQnsg=="

    return config;
  }, function (err) {
    console.log("超时")
    return Promise.reject(err);
  });


//token过期 拦截在消息抵达之前做点什么--,
axios.interceptors.response.use(function (response) {
  //  用户信息是否超时,重定向到登录页面
  if (response.data.msg == '999'){
    axios.defaults.headers.common['token'] = '';
    var storage = window.localStorage;
    storage.clear();
    router.replace("/login")
    Message({message:"用户信息失效,请重新登陆",center:true,type:'warning'})
    return Promise.reject("用户信息失效,请重新登陆")
  }
  //redis 超时
  else if(response.data.msg == '888'){
    Message({message:"服务器连接超时",center:true,type:'warning'})
    return Promise.reject("服务器连接超时")
  }
  else{
    return response}
}, function (error) {
  return Promise.reject("反正就是服务器出啥错了")
})

根据模块拆分的api

//考勤设置
import axios from 'axios';
import {base, configtoJson, configtoFormData} from './api';
//JSON格式数据 api.configtoJson
//formData数据格式 api.configtoFormData


  //获取公司列表
  export const queryCompanyList = params =>{
    return axios.post(`${base}/url`,params,configtoJson)
    .then(res => res.data);
  };

接下来就是引入到你的页面直接调用啦。。。。

你可能感兴趣的:(技术)