vue-axios基础配置以及请求响应拦截

• axios配置

/**
 * 创建单点登录Axios实例对象
 * @type {AxiosInstance}
 */
export const ssoAxios = axios.create({
  //`method` 是请求的方法
  method: 'post',
  //如果url不是绝对路径，那么会将baseURL和url拼接作为请求的接口地址；用来区分不同环境，建议使用
  baseURL: store.state.platSsoManageIp,
  //请求超时时间（毫秒）
  timeout: 10000,
  //`headers` are custom headers to be sent
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'Accept': 'application/json, text/javascript, */*'
  },
  transformRequest: [
    function (data) {
      if(data.constructor == Array){
        return data;
      }
      let ret = '';
      for (let it in data) {
        if (ret != "") {
          ret += '&';
        }
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]);
      }
      return ret;
    },
  ]
});

• 请求拦截

在请求头上加上token

/**
 * 创建单点登录Axios的请求拦截器
 */
ssoAxios.interceptors.request.use(
  config => {//这里的config包含每次请求的内容
    if (config.method == 'post') {
      config.headers['Authorization'] = store.state.token_type + " " + store.state.access_token;
    } else if (config.method == 'get') {
      config.headers['Authorization'] = store.state.token_type + " " + store.state.access_token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

• 响应拦截

当响应结果返回时，接收处理状态码

401：登录超时，跳转至登录路由

403：无权限，提示

/**
 * 创建单点登录Axios的响应拦截器
 */
ssoAxios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    console.info(error.response);
    if (error.response) {
      switch (error.response.status) {
        case 400:
          alert("参数错误。");
          break;
        case 401://返回 401 清除token信息并跳转到登录页面
          //保存或修改登录状态
          if (!window.sessionStorage) {
            alert("浏览器不支持sessionStorage");
          } else {
            let storage = window.sessionStorage;
            //写入登录的用户名
            storage["loginUserName"] = '';
            //写入登录状态字段
            storage["userLoginStatus"] = false;
            //写入token_type字段
            storage["token_type"] = '';
            //写入access_token字段
            storage["access_token"] = '';
          }
          if(vue.$route.name != "Login"){
            $(".modal").modal("hide");
            vue.$router.push({name: 'Login', query: {lastVisitPath: vue.$route.path}});
          }
          break;
        case 403://权限不足，提示用户
          if(vue.$route.name != "NoRight"){
            $(".modal").modal("hide");
            vue.$router.push({name: 'NoRight', query: {lastVisitPath: vue.$route.path}});
          }
          break;
        default:
          alert("出现故障，请联系管理员。");
          break;
      }
    }
    return Promise.reject(error.response.data);//返回接口返回的错误信息
  },
);

• axios的使用

这里我们先前已把一些固定的系数在创建axios的实例对象的时候已经写好了，所以在使用的时候，我们一般只需要在把url和参数写好，在对返回结果进行处理即可。

ssoAxios({
  url: 'plat/user/personalInfo/updateManagerPwd',
  data: {
    'password': this_.oldPassword,
    'resetPassword': this_.newPassword
  }
}).then(function (response) {
  console.info(response);
  let data = response.data;
  //数据处理
});