美文网首页前端知识
axios使用拦截器添加token,限制快速点击

axios使用拦截器添加token,限制快速点击

作者: yimi珊 | 来源:发表于2019-03-20 17:01 被阅读0次
  1. 此处使用了vux框架,可根据需要修改
  2. 自行填写域名地址
  3. token添加的方式及位置,根据需求添加。(此处token保存在localStorage中)
  4. token过期的条件限制及 token过期后的操作,根据需要修改。
  5. 最后为的get和post请求例子
import axios from 'axios';
import Vue from 'vue';
import store from '../store/'
import router from "../router"

import {
    ToastPlugin,
    LoadingPlugin
} from 'vux'
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)

var qs = require('qs');

// 限制快速点击
var requesting = [];
var limitTime = 1000;
var requestingId = "";

if(process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '地址'; //请求域名地址
}
Vue.prototype.$axios = axios.defaults.baseURL;
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 添加token(根据所需位置自行修改)
    let token = localStorage.getItem("Token");
    if(token) {
        config.headers.common['Authorization'] = 'Bearer ' + token
    }

    // 显示loading
    Vue.$vux.loading.show({
        text: '加载中...'
    });

    // 限制快速点击
    var requestingId = JSON.stringify(config.data);
    if(config.method === "post") {
        let nowTime = new Date().getTime();
        requesting = requesting.filter(item => {
            return item.startTime + limitTime > nowTime;
        });
        let sessionUrl = requesting.filter(item => {
            return item.requestingId === requestingId;
        });
        if(sessionUrl.length > 0) {//请求重复 中断请求
            return config;
        }
        let item = {
            requestingId: requestingId,
            startTime: nowTime
        };
        requesting.push(item);
    }

    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    Vue.$vux.loading.hide();

    if(response.data.code == '-100') { //token过期或为空
        router.push("/login");
    } 
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

//---------------get请求---------------------
export const getinfo= () => {
    return axios.get('/api/getinfo');
}

//---------------post请求---------------------
export const geturl= (pms) => {
    const params = qs.stringify(pms);
    return axios.post('/api/geturl', params);
}

相关文章

网友评论

    本文标题:axios使用拦截器添加token,限制快速点击

    本文链接:https://www.haomeiwen.com/subject/bedtvqtx.html