zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    1017 A除以B (20分)**
    剑指 Offer 11. 旋转数组的最小数字(简单)
    剑指 Offer 04. 二维数组中的查找(中等)
    剑指 Offer 53
    剑指 Offer 53
    剑指 Offer 03. 数组中重复的数字(简单)
    剑指 Offer 58
    剑指 Offer 05. 替换空格(简单)
    执行npm install命令出错问题
    剑指 Offer 35. 复杂链表的复制(中等)
  • 原文地址:https://www.cnblogs.com/zjdxr-up/p/11474870.html
Copyright © 2011-2022 走看看