小程序无感刷新

news/2024/7/20 1:00:54 标签: 小程序

下载wechat-http依赖

npm install wechat-http

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

// 导入 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

http://www.niftyadmin.cn/n/5099231.html

相关文章

图像抓取代码示例

以下是一个使用luasocket-http库的Lua下载器程序,用于下载图像。此程序使用了https://www.duoip.cn/get_proxy的代码。 -- 引入luasocket和luasocket-http库 local socket require("socket") local http require("http") ​ -- 获取代理服务…

Location的匹配

nginx的正则表达式: ^:字符串的起始位置 $:字符窜的结束位置 *:匹配所有 :匹配前面的字符一次或者多次 ?:匹配前面的字符0次或者1次 .:任意单个字符 {n}:连续重复出现n次。 {n,m}:连续重复出现n-m次 [a-Z0-9A-Z] [C]:匹配单个字符c ():分组 |:或 一 Location的分类&#xff1a…

Vue3使用Vite创建项目

node版本:node -v v18.16.0 npm版本: npm -v 9.5.1 Vite Vite:是一种新型前端构建工具,能够显著提升前端开发体验 脚手架,创建Vue项目,替代 Vue-cli 基于Vite创建vue项目: 1.npm create vitelatest 2.完…

CMake教程-第 7 步:添加系统自省功能

CMake教程-第 7 步:添加系统自省功能 1 CMake教程介绍2 学习步骤Step 1: A Basic Starting PointStep 2: Adding a LibraryStep 3: Adding Usage Requirements for a LibraryStep 4: Adding Generator ExpressionsStep 5: Installing and TestingStep 6: Adding Sup…

尚硅谷Flink(四)处理函数

目录 🦍处理函数 🐒基本处理函数 🐒按键分区处理函数(KeyedProcessFunction) 🐵定时器(Timer)和定时服务(TimerService) // 1、事件时间的案例 // 2、处理…

Maven实战-聚合与继承

Maven实战-聚合与继承 1、pom.xml文件build配置 <build><testResources><testResource><directory>src/test/resources</directory><filtering>true</filtering></testResource></testResources><plugins><p…

Kotlin中的变量与常量

在Kotlin中&#xff0c;val和var是用于声明变量的关键字。 val用于声明不可变的变量&#xff0c;也就是说一旦初始化之后&#xff0c;其值就不能再被修改。它类似于Java中的final关键字。val声明的变量可以通过类型推断自动推断其类型&#xff0c;也可以显式定义类型。 以下是…

Linux多线程编程- 条件变量(Conditional variable)

基本概念 条件变量是用于线程同步的另一种工具&#xff0c;特别是当线程需要等待某个条件成立&#xff08;或者说满足&#xff09;时。条件变量常与互斥锁&#xff08;mutex&#xff09;配合使用&#xff0c;以安全地检查和等待条件的变化。 目的&#xff1a;条件变量的主要目…