zoukankan      html  css  js  c++  java
  • axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断

    import axios from 'axios'
    import Qs from 'qs'
    
    // 超时设置
    const service = axios.create({
        transformRequest: [function (data) {
        data = Qs.stringify(data);
            return data;
        }],
        // 请求超时时间
        timeout: 5000   ,
    });
    
    //对,就是用qs对aixos进行全局设置,之后在首页引入这个封装好的aixos就好了,传给后台都是类似form的形式
    2、这里补充一下,用拦截器给请求头加token
    // http request 拦截器
    // 每次请求都为http头增加Authorization字段,其内容为token
    service.interceptors.request.use(
        config => {
            let cancel
            config.cancelToken = new CancelToken(function executor(c) {
                cancel = c;
            })
            var token = Cookies.get('token');
             config.headers.token = token
             if(token != undefined){
                 Auth.setLoginStatus()
            }
            stopRepeatRequest(config.url, cancel)
            return config
        },
        err => {
            return Promise.reject(err);
        }
    );
    3、针对返回来的数据进行拦截,这里进行权限判断,没权限或者页面不对,就跳到404
    // http response 拦截器
    // 针对响应代码确认跳转到对应页面
    service.interceptors.response.use(
        response => {
            for( let i = 0; i < requestList.length; i++){
                if(requestList[i] == response.config.url){
                    // 注意,不能保证500ms必定执行,详情请了解JS的异步机制
                    requestList.splice(i,1)
                    //异步删除有问题
                    // setTimeout(function(){
                    //   requestList.splice(i,1)
                    //   console.log(requestList,'执行删除了=================')
                    // }, 100)
    
                    break
                }
            }
            return Promise.resolve(response.data)
        },
        error => {
            if(axios.isCancel(error)){
                return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
            } else if (error.response) {
                switch (error.response.status) {
                    case 401:
                        router.push('error/401');
                    case 403:
                        router.push('error/403');
                    default:
                        Message({
                            message: `服务器错误!错误代码:${error.response.status}`,
                            type: 'error'
                        })
                }
                return Promise.reject(error.response.data)
            }
        }
    );
  • 相关阅读:
    delete与double free
    OpenCV(1)——基础数据结构CvMat
    防止表单自动提交_随笔2012年5月16日
    Flex 学习笔记学习资料
    当析构函数遇到多线程 ── C++ 中线程安全的对象回调
    .NET Core2.0+MVC 用session,cookie实现的sso单点登录
    TreeView中右击直接获取节点的方法
    webservice 远程调试配置
    数组,集合 转成DataTable 方法
    String类中几个简单的常用方法
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9491994.html
Copyright © 2011-2022 走看看