三分钟教你小程序实现无感刷新！

无感刷新:
无感刷新对于前端来说是一项非常实用的技术,其本质是为了优化用户体验，让用户感受不到token已经过期。
本质上就是登录时，储存token和refresh_token。当token过期或错误时不需要用户跳回登录页重新登录,而是在响应拦截器里面进行拦截,利用refresh_token对原有的token进行覆盖,然后重发请求的操作。

注意：
这个需求其实生活中很常见。比如说某个应用我们天天打开，则不会提示我们登录，如果是有几周或更长时间去打开时，会再次要求我们登录。这就是refresh_token的作用，refresh_token一个更常见的名字叫token无感刷新。

给大伙上张图嗷~

步骤如下哈~

1. 用户在首次完成登录时会分别得到 token 和 refresh_token
2. 当 token 失效后（例如2小时之后），调用接口A会返回 401 状态码（这是与后端约定好的规则）
3. 检测状态码是否为 401，如果是，再判断返回数据是否包含refreshToken，是则返回登录页，否则携带refreshToken去调用刷新token的接口

// 配置响应拦截器
http.intercept.response = async ({data,config})={
  if (data.code === 401) {
    // 判断这个路径里是否包含refreshToken，是则清空存储的token
    if (config.url.includes('/refreshToken')) {
      app.setToken('token', '')
      app.setToken('refreshToken', '')

    //使用refreshToken覆盖原有请求头的token，重发请求
    const res = await http({
      url: '/refreshToken',
      method: 'POST',
      header: {
        Authorization: 'Bearer ' + app.getToken('refreshToken')
      }
    })
    console.log(res, config);
    // 修改请求头Authorization里带的错误或者过期token
    // res.token重发请求后获取到的正确token
    config.header.Authorization = 'Bearer ' + res.token
    // 重发请求return结果
    return http(config)
  }
}

优化点：token过期后，可以调用getCurrentPages()获取当前页面的路径，保证登录成功后能跳回到原来页面

     // token过期后重发请求时带上页面地址值，以便重新登录后重回该页面
      const pages = getCurrentPages()
      const curpage = pages[pages.length - 1]
      wx.redirectTo({
        url: '/pages/login/index?redirectURL=/' + curpage.router,
      })
      //注意哈，这个api是支持promise对象的！
      //return出一个promose对象到控制台
      return Promise.reject('用户信息过期，请重新登录')

4. 刷新 token 的接口后会返回新的 token 和 refreshToken
5. 把401的接口A重新发送一遍

大概就是这样啦~，因为最近在写小程序的项目，很多都是自己的写的思路，不够优雅可以多多指教哈！