关闭

vue封装axios和利用拦截器监控返回的token的变化和报错信息

时间: 2019-11-17阅读: 754标签: axios

一、axios的封装

点击此处查看axios官方文档

步骤一:安装axios进入vue-cli

npm install axios

步骤二:新建一个httpConfig文件下,创建两个js文件,一个作为axios拦截器用,一个封装接口


步骤三:在serviceAPI.config.js中封装所有的API接口

const BASEURL  = 'http://192.168.1.112/' //设定一个常量BASEURL,引号内的是接口地址
const URL ={
    mainPage:[{
        mainPage:BASEURL+'api/mainPage/getMainPage',//引号内的接口地址
        loginOn: BASEURL + 'api/system/login',//获取token
    }]

}
//外溢到其他组件
export default{
    URL
}

步骤三:在Http.js中封装axios拦截器

import axios from 'axios' //引入axios组件
import router from '../router'; //引入vue-router组件
import url from './serviceAPI.config' //引入serviceAPI接口


// request拦截器:对请求参数做监听和处理
axios.interceptors.request.use(

    config => {
        //从session storage中获取token
        let token = sessionStorage.getItem("token"); 
        //在每一个接口的请求头上增加一个token
        if (config.url == url.URL.login[0].loginOn) {
        } else {
   
            config.headers = {
                'Authorization': token
            }
        }
        return config;
    },
    error => {//请求错误处理
        return Promise.reject(error.response);
    }
);

// 添加response响应拦截器
axios.interceptors.response.use(function (response) {
    // console.log(response.headers.authorization);
    //如果token值发生改变的时候,替换token值
    if (response.headers.authorization) {
        sessionStorage.setItem("token", response.headers.authorization);
    }
    
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 响应头发生错误发生的操作
    if (error.response.status) {
        switch (error.response.status) {
            // 在登录成功后返回当前页面,这一步需要在登录页操作。                
            // 401 token过期                
            // 登录过期对用户进行提示                
            // 清除本地token和清空sessionStorage的             
            // // 跳转登录页面                
            case 401:
                // 清除token                    
                localStorage.removeItem('token');
                // this.$message.error="token已过期";
                // store.commit('loginSuccess', null);                    
                // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                router.replace({
                    path: '/login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
                this.$message.error("登入已经过期")

                break;
            // 404请求不存在                /*  */
            case 403:  
                Toast({
                    message: '没有当前操作的权限',
                    duration: 1500,
                    forbidClick: true
                });
                
                // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                setTimeout(() => {
                    router.replace({
                        path: '/',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                }, 1000);
                break;
            case 400:
                Toast({
                    message: '参数错误',
                    duration: 1500,
                    forbidClick: true
                });
                // localStorage.removeItem('token');                    
                // store.commit('loginSuccess', null);                    
                // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                setTimeout(() => {
                    router.replace({
                        path: '/',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                }, 1000);
                break;
            // 其他错误,直接抛出错误提示                
            default:
        }
        return Promise.reject(error.response);
    }
});
export default axios;

步骤四:在main.js中引入在分配到其他组件中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //引入vue组件
import App from './App' // 引入APP.vue组件
import router from './router' //引入router组件
//引入Http.js拦截器
import axios from './httpConfig/Http'
//引入serviceAPI.config.js管理API接口
import URL from '@/httpConfig/serviceAPI.config.js'

Vue.config.productionTip = false
//把axios拦截器存入vue的变量$axios引用
Vue.prototype.$axios = axios
//把API接口管理URL存入vue的Globel变量中
Vue.prototype.GLOBAL = URL;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

步驟五:在子组件中引入接口

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {

    }
  },
  methods () {
    //URL.mainPage[0].loginOn接口,data是参数变量, header头部信息参数
    this.$axios.post(URL.mainPage[0].loginOn,data,header)
    .then( res =>{
    //接口请求成功后的回调
    } )
    .catch ( err => {
      //接口请求失败后的回调
    })
  }
}

</script>

<style>

</style>

拓展:怎么封装post和get

封装axios的get方法:


代码展示:

/* 
* axios:get方法封装 
* @param {String} url [请求的接口地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url,params) {
    return new Promise( (resolve,reject)=>{
        axios.get( url, {
           params:params
        } ).then( res => {
            resolve(res.data);
        }).catch( err => {
            reject(err.data);
        })
    } )
   }
封装axios的post方法:

post方法和get方法相比,提交params参数的时候需要通过node的qs模块进行序列化参数,没有序列化,可能造成后台拿不到前台提交的数据

/*
 *axios:post方法封装
 *@param {string} url [请求接口的地址]
 * @param {object} params [请求时携带的参数]
 * QS.stringify(params) 序列化请求时携带的参数
 * 
*/ 
export function post (url,params){
    return new Promise( (resolve,reject) =>{
        axios.post( url, QS.stringify(params) )
        .then( res => {
            resolve(res.data);
        } )
        .catch( err => {
            reject(err.data)
        } )
    } );
}

把axios get 和post方法引入到serviceAPI.config.js 管理公共接口

在serviceAPI.config中定义一个api的方法,这个方法有一个参数是p,p是作为前端向后端请求接口时候所需要携带的参数,通过export抛出post方法
提供一个公共API 接口:https://api.apiopen.top/

import {get,post} from './Http' //引入axios的get 和post方法
/* 
*定义一个变量为p,p为所携带的参数
*/
export const api = p => post('https://api.apiopen.top/EmailSearch?number=1012002',p)

在各个子组件的引用

template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
  import{api} from "./httpConfig/serviceAPI.config";
export default {
  name: 'App',
  data () {
    return {

    }
  },
  methods: {
   test () {
     api() //api({data})//在api中需要请求的参数 
     .then ( res =>{
       //成功后返回的数据
       console.log(res)
     })
   }
  },
  mounted () {
    this.test() //调用test方法
  }
}

</script>

<style>

</style>

点击此处跳转到github查看源码

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6888

关闭

axios前端加密通讯的处理

先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。

怎样在vue项目中使用axios处理接口请求

vue项目中使用axios处理后端接口请求,在main.js中全局引入axios,因为axios不是为了vue写的插件(插件内要处理)不支持vue.use()加载方式,为方便使用,可以将其挂载在vue原型上;全局使用this.$axios

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

axios统一接口管理及优化

根据在项目的使用,发现有以下问题需要优化:withAxios导出的接口方法对象对编辑器来说是不透明的,所以代码提示功能缺失。同一个方法调用多次,如何保证组件总是获取到最后一次的返回信息。

网络模块axios的简单应用

例子中使用到的url仅作为示例,不一定有效,想要复现代码需要使用能够提供数据的有效服务器接口url,axios:ajax i/o system;是用于在Vue.js中发送网络请求的第三方框架;可通过许多方式发送网络请求比如:

Vue项目中使用Axios封装http请求

使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求。

封装属于自己的axios请求

axios是一个基于promise的HTTP库,可以用于浏览器中进行AJAX请求处理。在项目中,为了实现通用性,封装了一个axios请求。

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

封装 axios 实现自动重试

因为 Axios 是支持 Promise,所以我们的方法也支持。axios 如果成功了我们也 resolve。axios 如果失败了我们先判断次数,然后根据具体的错误,进行重试。

vue中Axios的封装和API接口的管理

我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!