mpvue微信小程序的接口请求fly全局拦截代码实例

 更新时间:2019年11月13日 11:51:36   作者:倔强的皮球  
这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

业务要求

  需要进入页面时就要游客登陆拿到token;

  之后的接口都是需要这个token;

  其他操作则需要授权登陆,此时的token已失效;

  token过久之后会过期;

业务实现:

  1.全局拦截

  fly.interceptors.request.use(request => {
    const token = storage.get('jwt')
    // 给所有请求添加自定义header
    if (!jwt) {
      fly.lock() // 进入接口后没有token的需要锁住请求
      return store.dispatch('visitorLoginFun').then(res => { // 这里需要一个新的拦截器
        if (res) {
          const token = storage.get('token')
          request.headers['Authorization'] = 'Bearer ' + token // 为队列里的接口加token
          return request
          }
        }).finally(() => {
          fly.unlock()
        })
      } else {
        request.headers['Accept'] =
        'application/json,text/html;q=0.9,image/webp,*/*;q=0.8'
        request.headers['Content-Type'] = 'application/json;charset=UTF-8'
        request.headers['Authorization'] = 'Bearer ' + token
        request.headers['client'] = client
        request.headers['version'] = version
        wx.showNavigationBarLoading()
        return request
      }
    })

    2.返回拦截

    fly.interceptors.response.use(
      (response, promise) => {
        if (response.data.code === 1001) {
          mpvue.navigateTo({url: '../accredit/main'}) // 返回提示需要登陆需要跳转授权登陆页 或者弹窗 授权只能通过按钮触发
        }
        if (response.data.code === 1002) {
          fly.lock() //token过期 锁住拦截器
          return store.dispatch('accreditLogin').then(res => { // 使用新起的拦截器发送登陆接口
          }).finally(() => fly.unlock()).then(() => {
            return fly.request(response.request) // 返回上一个请求
          })
         }
        return promise.resolve(obj)
      }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 一些手写JavaScript常用的函数汇总

    一些手写JavaScript常用的函数汇总

    这篇文章主要给大家介绍了一些手写的JavaScript常用的函数,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JavaScript函数获取事件源的小例子

    JavaScript函数获取事件源的小例子

    这篇文章主要介绍了JavaScript函数获取事件源具体实现,需要的朋友可以参考下
    2014-05-05
  • javascript实现简约的页面右下角点击弹出窗口示例【测试可用】

    javascript实现简约的页面右下角点击弹出窗口示例【测试可用】

    这篇文章主要介绍了javascript实现的页面右下角点击弹出窗口功能,结合实例形式详细分析了javascript页面右下角点击弹出窗口功能的相关步骤、原理与注意事项,需要的朋友可以参考下
    2023-07-07
  • js实现简单的碰壁反弹效果

    js实现简单的碰壁反弹效果

    这篇文章主要为大家详细介绍了js实现简单的碰壁反弹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript自定义日历实现签到功能

    JavaScript自定义日历实现签到功能

    这篇文章主要为大家详细介绍了JavaScript自定义日历实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 总结js中的一些兼容性易错的问题

    总结js中的一些兼容性易错的问题

    下面小编就为大家分享一篇总结js中的一些兼容性易错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序实现录音Record功能

    微信小程序实现录音Record功能

    这篇文章主要为大家详细介绍了微信小程序实现录音Record功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • ES6 解构赋值的原理及运用

    ES6 解构赋值的原理及运用

    ES6允许按照一定模式从数组或对象中提取值,然后对变量进行赋值,称为解构。只要等号两边的模式相同,左边的变量就会被赋予对应的值,这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。
    2021-05-05
  • JS判断客户端是手机还是PC的2个代码

    JS判断客户端是手机还是PC的2个代码

    Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的检测,源生的哦,方法一共有两种
    2014-04-04
  • js用正则表达式来验证表单(比较齐全的资源)

    js用正则表达式来验证表单(比较齐全的资源)

    在学习网页中的表单验证,顺便学习下正则表达式,在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版,喜欢的朋友可以收藏
    2013-11-11

最新评论