小程序无感刷新

下载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
相关推荐
luckyext4 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
毕业设计-016 小时前
0081.基于springboot+uni-app的垃圾分类小程序+论文
spring boot·小程序·uni-app
狂团商城小师妹7 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·uni-app·微信公众平台
V+zmm101347 小时前
基于微信小程序的家政服务预约系统的设计与实现(php论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
社会底层无业大学生8 小时前
uniapp微信小程序PC端选择文件(无法使用wx.chooseMessageFile问题)
微信小程序·小程序·uni-app
这里是杨杨吖9 小时前
SpringBoot+uniApp日历备忘录小程序系统 附带详细运行指导视频
spring boot·小程序·uni-app·日历备忘录
寰宇软件9 小时前
PHP培训机构教务管理系统小程序源码
小程序·uni-app·vue·php
『 时光荏苒 』12 小时前
hbuilderx 小程序分包_微信小程序关于分包【收藏版】
微信小程序·小程序
V+zmm1013413 小时前
基于微信小程序的民宿短租系统设计与实现(ssm论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
小咕聊编程13 小时前
【含文档+PPT+源码】基于微信小程序的校园志愿者管理系统的设计与实现
微信小程序·小程序