美文网首页
移动端不定期更新token方案

移动端不定期更新token方案

作者: reloadRen | 来源:发表于2019-08-24 17:50 被阅读0次

    客户端需要不定期更新token,同时得保证在发送更新token同时其他网络请求挂起,否则会报token失效。待新token回来之后,重新发起挂起的请求。

    应服务端要求,更新token请求时,老token立刻失效

    原文链接,转载请注明出处

    客户端刷新token.png

    <a name="markdown-callApi"></a>模拟网络请求封装(模拟)

    let token = 1 当前请求使用的token
    let refreshToken = false // 是否处于更新token中
    let subscribers = []; // 挂起的请求数组
    
    /**
     * 网络请求入口
     */
    function callApi (data, time = 1000) {
      console.log('0000callApi=== type:' + data.type + '  token:' + token)
      if (refreshToken) {
        const retryOriginalRequest = new Promise((resolve) => {
                    addSubscriber(()=> {
                        resolve(request(time, data.type))
                    })
                });
                return retryOriginalRequest;
      }
      // 判断是否是执行更新token
      if (data && (data.type == 'refreshToken')) {
         const newData = request(time, data.type)
         refreshToken = true
         return newData
      }
      return request(time, data.type)
    }
    
    /**
     * 执行网络请求
     */
    function request(ms, type) {
      console.log('1111request=== type:' + type + '  token:' + token)
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, type);
      });
    }
    
    /**
     * token更新后,重新发起挂起的请求
     */
    function onAccessTokenFetched() {
        subscribers.forEach((callback)=>{
            console.log('重新请求')
            callback();
        })
        refreshToken = false
        subscribers = [];
    }
    
    /**
     * push挂起的请求
     * @param callback 挂起的请求
     */
    function addSubscriber(callback) {
        subscribers.push(callback)
    }
    
    

    <a name="markdown-use"></a>使用演示:

    // before
    callApi({type: 'first', token}, 1000).then(consoleResponse)
    
    // Todo
    callApi({type: 'refreshToken', token}, 2000).then((v) => {
      token = 2
      onAccessTokenFetched()
      consoleResponse(v)
    })
    
    // doing
    callApi({type: 'second', token}, 2000).then(consoleResponse)
    callApi({type: 'third', token}, 2000).then(consoleResponse)
    callApi({type: 'four', token}, 2000).then(consoleResponse)
    callApi({type: 'five', token}, 2000).then(consoleResponse)
    
    // after
    setTimeout(() => callApi({type: 'six', token}, 2000).then(consoleResponse), 5000)
    
    
    function consoleResponse (v) {
      console.log('2222response===type:' + v + ' token:' + token)
    }
    

    <a name="markdown-log"></a>结果打印

    "0000callApi=== type:first  token:1"
    "1111request=== type:first  token:1"
    "0000callApi=== type:refreshToken  token:1"
    "1111request=== type:refreshToken  token:1"
    "0000callApi=== type:second  token:1"
    "0000callApi=== type:third  token:1"
    "0000callApi=== type:four  token:1"
    "0000callApi=== type:five  token:1"
    "2222response===type:first token:1"
    "重新请求"
    "1111request=== type:second  token:2"
    "重新请求"
    "1111request=== type:third  token:2"
    "重新请求"
    "1111request=== type:four  token:2"
    "重新请求"
    "1111request=== type:five  token:2"
    "2222response===type:refreshToken token:2"
    "2222response===type:second token:2"
    "2222response===type:third token:2"
    "2222response===type:four token:2"
    "2222response===type:five token:2"
    "0000callApi=== type:six  token:2"
    "1111request=== type:six  token:2"
    "2222response===type:six token:2"
    

    <a name="markdown-end"></a>小结

    • 本案例主要是模拟流程,算是对这次改造封装网络请求的思路,不对地方各位大神多多指点
    • 真正用于网络请求的过程中,<font color=red>需要对请求超时和请求出错的处理</font>,超时和出错都需要重置更新token标识,重起发起挂起的网络请求

    相关文章

      网友评论

          本文标题:移动端不定期更新token方案

          本文链接:https://www.haomeiwen.com/subject/dnmqectx.html