vue中axios使用一:axios做拦截器

时间:2019-09-06
本文章向大家介绍vue中axios使用一:axios做拦截器,主要包括vue中axios使用一:axios做拦截器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

  项目中用到了单点登录,依赖的公司通用的jar包,且项目为前后端分离的方式,为了管理系统的所有请求和

超时管理,用到了axios,做前端请求拦截,并做管理。

  其有以下特点:

  

  axios是请求后台资源的模块,用来请求后台资源。在项目中安装的方法为,在对应的项目路径下,后dos窗口

执行以下命令:

npm install axios

   安装成功后会在项目的package.json文件中出现对象安装插件的版本:

 在main.js中引用改模块:

import axios from 'axios';

  开始进行拦截请求:   

axios.interceptors.request.use((config) => {
  console.info(config);
  // 请求拦截
  jsonp('/authStatus', null, (err, data) => {
    console.info(data);
   // 请求拦截响应的参数,判断是否会话过期
if(!data.hasLogin){
     // 页面刷新跳转到登录页面 window.location.href
= loginTimeOutUrl; } }) return config; });

  拦截请求响应数据:

Vue.prototype.$http = axios;
axios.defaults.crossDomain = true;
axios.interceptors.response.use((response) => {
  if (response && response.data) {
    if (response.data.status == "UNKNOWN" || response.status == 302) {
      //alert("passport登录超时,刷新重新登录");
      window.location.reload();
    } else {
      return response;
    }
  } else {
    return response;
  }
}, function (error) {
  if (302 == error.response.status || error.response.status == "UNKNOWN") {
    //alert("passport登录超时,刷新重新登录");
    window.location.reload();
  } else {
    return Promise.reject(error);
  }
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

本文参考:https://www.kancloud.cn/yunye/axios/234845

原文地址:https://www.cnblogs.com/zjdxr-up/p/11474870.html