乐趣区

关于前端:前端如何实现token的无感刷新

jiezi

通常，对于一些须要记录用户行为的零碎，在进行网络申请的时候都会要求传递一下登录的 token。不过，为了接口数据的平安，服务器的 token 个别不会设置太长，依据须要个别是 1 - 7 天的样子，token 过期后就须要从新登录。不过，频繁的登录会造成体验不好的问题，因而，须要体验好的话，就须要定时去刷新 token，并替换之前的 token。

要做到 token 的无感刷新，次要有 3 种计划：

计划一：

后端返回过期工夫，前端每次申请就判断 token 的过期工夫，如果快到过期工夫，就去调用刷新 token 接口。

毛病 ：须要后端额定提供一个 token 过期工夫的字段；应用了本地工夫判断，若本地工夫被篡改，特地是本地工夫比服务器工夫慢时，拦挡会失败。

办法二

写个定时器，而后定时刷新 token 接口。
毛病 ：浪费资源，耗费性能, 不倡议采纳。

办法三

在申请响应拦截器中拦挡，判断 token 返回过期后，调用刷新 token 接口。

综合下面的三个办法，最好的是第三个，因为它不须要占用额定的资源。接下来，咱们看一下应用 axios 进行网络申请，而后响应 service.interceptors.response 的拦挡。

import axios from 'axios'

service.interceptors.response.use(
  response => {if (response.data.code === 409) {return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken()}).then(res => {const { token} = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {removeToken()
          router.push('/login')
          return Promise.reject(err)
        })
    }
    return response && response.data
  },
  (error) => {Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

问题一：如何避免屡次刷新 token

为了避免屡次刷新 token，能够通过一个变量 isRefreshing 去管制是否在刷新 token 的状态。

import axios from 'axios'

service.interceptors.response.use(
  response => {if (response.data.code === 409) {if (!isRefreshing) {
        isRefreshing = true
        return refreshToken({refreshToken: localStorage.getItem('refreshToken'), token: getToken()}).then(res => {const { token} = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {isRefreshing = false})
      }
    }
    return response && response.data
  },
  (error) => {Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

二、同时发动两个或者两个以上的申请时，怎么刷新 token

当第二个过期的申请进来，token 正在刷新，咱们先将这个申请存到一个数组队列中，想方法让这个申请处于期待中，始终等到刷新 token 后再一一重试清空申请队列。
那么如何做到让这个申请处于期待中呢？为了解决这个问题，咱们得借助 Promise。将申请存进队列中后，同时返回一个 Promise，让这个 Promise 始终处于 Pending 状态（即不调用 resolve），此时这个申请就会始终等啊等，只有咱们不执行 resolve，这个申请就会始终在期待。当刷新申请的接口返回来后，咱们再调用 resolve，一一重试。

import axios from 'axios'

// 是否正在刷新的标记
let isRefreshing = false
// 重试队列
let requests = []
service.interceptors.response.use(
  response => {
  // 约定 code 409 token 过期
    if (response.data.code === 409) {if (!isRefreshing) {
        isRefreshing = true
        // 调用刷新 token 的接口
        return refreshToken({refreshToken: localStorage.getItem('refreshToken'), token: getToken()}).then(res => {const { token} = res.data
          // 替换 token
          setToken(token)
          response.headers.Authorization = `${token}`
           // token 刷新后将数组的办法从新执行
          requests.forEach((cb) => cb(token))
          requests = [] // 从新申请完清空
          return service(response.config)
        }).catch(err => {
        // 跳到登录页
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {isRefreshing = false})
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数模式将 resolve 存入，期待刷新后再执行
          requests.push(token => {response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  (error) => {Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)
退出移动版