小程序中的token无感刷新

其实token无感刷新不管是在vue中还是小程序中，核心是不变的，下面是方法

首先我们需要创建一个utils文件夹里面创建一个http.js

在http.js中做以下操作====》最主要的是看响应拦截器中的操作

先下载 wechat-http 包

npm install wechat-http

 在http.js中导入

import http from 'wechat-http'

以下操作都是再http.js中操作 

 设置基地址

http.baseURL='http://www.xxxxx'

设置请求拦截器

请求拦截器

http.intercept.request = (params) => {

  // 读取全局实例中的 token

  const { token } = getApp()

  // 指定一个公共的头信息

  // 初始为空对象后续可以扩展

  const defaultHeader = {}

  // 追加 token 头信息

  if (token) defaultHeader.Authorization = 'Bearer ' + token

  // 合并自定义头信息和公共头信息

  params.header = Object.assign(defaultHeader, params.header)

  // 处理后的请求参数

  return params

}

设置响应拦截器（同时我们去判断token过期跳转以及无感刷新token都是再响应拦截器中去做）

http.intercept.response = async ({
  statusCode,
  config,
  data
}) => {
  // 过滤接口返回的数据
  // console.log(res, '响应的数据');
  // token过期处理
  // 接下来就是开始进行无感刷新token
  if (statusCode === 401) {
    const app = getApp()
    if (config.url.includes('/refreshToken')) {
      console.log(config, '走不走这个');
      app.token = ""
      app.refreshToken = ""
      wx.clearStorage()
      const redirect = getCurrentPages()[getCurrentPages().length - 1].route
      wx.redirectTo({
        url: '/pages/login/index?redirect=/' + redirect,
      })
      return
    }
    console.log(wx.getStorageSync('refreshToken'), '刷新的token');
    const res = await http({
      url: "/refreshToken",
      method: "post",
      header: {
        // 注意这里是要设置的是refreshtoken
        Authorization: 'Bearer ' + wx.getStorageSync('refreshToken')
      }
    })
    console.log(res, '无感刷新的结果');
    // 3.设置全局的token以及refreshToken
    app.token = res.data.token
    app.refreshToken = res.data.refreshToken
    // 4.将token存入本地
    wx.setStorage({
      key: 'token',
      data: res.data.token
    })
    wx.setStorage({
      key: 'refreshToken',
      data: res.data.refreshToken
    })
    // // 返回之前的请求报文
    return http(
      Object.assign(config, {
        // 传递新的 token
        header: {
          Authorization: 'Bearer ' + wx.getStorageSync('token'),
        },
      })
    )
  }
  return data
}

挂载到wx全局命名空间以及将http暴露出去，然后再app.js导入进去

（1）wx.http=http

（2）export default http=====》去app.js中导入import './utils/http'