小程序无感刷新

下载wechat-http依赖

javascript 复制代码
npm install wechat-http

封装请求拦截器和相应拦截器,借助refreshToken实现无感刷新

javascript 复制代码
// 导入 http 模块
import http from 'wechat-http'
// 基础路径,同时需添加合法请求域名
http.baseURL = 'https://live-api.itheima.net'
// 配置请求拦截器
http.intercept.request = function (options) {
  // 扩展头信息
  const defaultHeader = {}
  // 身份认证
  defaultHeader.Authorization = 'Bearer ' + getApp().token
  // 与默认头信息合并
  options.header = Object.assign({}, defaultHeader, options.header)
  // 处理后的请求参数
  return options
}
// 响应拦截器,返回核心数据 data
http.intercept.response = async ({
  data,
  config
}) => {
  // 如果状态码为401,则表明token已失效
  if (data.code === 401) {
    // 获取应用实例
    const app = getApp()
    // 1.3 状态为 401 且接口为 /refreshToken 表明 refreshToken 也过期了
    if (config.url.includes('/refreshToken')) {
      // 获取当前页面的路径,保证登录成功后能跳回到原来页面
      const pageStack = getCurrentPages()
      const currentPage = pageStack.pop()
      const redirectURL = currentPage.route
      // 跳由跳转(登录页面)
      return wx.redirectTo({
        url: '/pages/login/index?redirectURL=/' + redirectURL,
      })
    }
    // 1.1 调用接口获取新的token
    const res = await http({
      url: '/refreshToken',
      method: 'POST',
      header: {
        Authorization: 'Bearer ' + app.refreshToken,
      },
    })
    // 检测接口是否调用成功
    if (res.code !== 10000) return wx.utils.toast('更新token失败了!')
    // 重新存储新的 token
    app.setToken('token', res.data.token)
    app.setToken('refreshToken', res.data.refreshToken)

    // 1.2 获取到原来接口请求的参数
    config = Object.assign(config, {
      header: {
        // 更新后的 token
        Authorization: 'Bearer ' + res.data.token,
      },
    })
    // 重新发请求
    return http(config)
  }
  // 只保留data数据,其它的都过滤掉
  return data
}

// 普通的模块导出
export default http
相关推荐
尚学教辅学习资料8 小时前
基于SpringBoot的图书借阅小程序+LW参考示例
spring boot·后端·小程序·java毕设·图书借阅
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
说私域9 小时前
社群共建与共享:以十点读书会为例探讨开源AI智能名片2+1链动模式S2B2C商城小程序的应用
大数据·人工智能·小程序
初尘屿风9 小时前
小程序类毕业设计选题题目推荐 (29)
spring boot·后端·学习·微信·小程序·课程设计
qq_12498707539 小时前
Java+SpringBoot+数据可视化的家庭记账小程序(程序+论文+安装+调试+售后等)
java·spring boot·小程序·毕业设计
玉阳软件yuyangdev_cn10 小时前
华为IEC104协议对接华为超充小程序
华为·小程序·iec104
feidodo小程序11 小时前
收集信息的表单小程序怎么做_自定义流程表单工具
java·服务器·前端·小程序·微信公众平台
尚学教辅学习资料13 小时前
基于SSM+uniapp的鲜花销售小程序+LW示例参考
小程序·uni-app·java毕设·鲜花销售
dxwd32015 小时前
测试使用Cursor中的deepseek-V3大模型辅助开发一个小程序
小程序
尚学教辅学习资料15 小时前
基于SpringBoot+vue+uniapp的投票小程序+LW示例参考
vue.js·spring boot·小程序·uni-app·java毕设·投票系统