h5頁面(vue) 與jsBridge交互

框架:vue3.0
混合開發
需求:根據後臺接口是否返回1401來刷新token,token刷新後重新調上一個接口

封裝jsBridge

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function () {
            callback(WebViewJavascriptBridge)
        }, false);
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
}
 
//初始化
setupWebViewJavascriptBridge(function (bridge) {
    try {
        bridge.init(function (message, callback) {
            callback(null);
        })
    } catch (e) { }
});

export default {
    //js調APP方法 （參數分別爲:app提供的方法名  傳給app的數據  回調）
    callhandler: function (method, params, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(method, params, callback)
        })
    },

    // APP調js方法 （參數分別爲:js提供的方法名  回調）
    registerHandler(method, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.registerHandler(method, (data, responseCallback) => {
                callback(data, responseCallback)
            })
        })
    }
}

按需引入

import jsBridge from '地址';

在request.js的請求攔截部分處理

1.定義調用jsBridge的方法
function reFreshToken(){
      return new Promise(function(resolve,reject){
                  JsBridge.callhandler('refreshToken',{},function(appResponse){
                      resolve(appResponse)  ;
                });
      }) ;
};

2.定義公共方法去調用reFreshToken,
function handleRefreshToken(config){
        return reFreshToken().then(res=>{
              let data=JSON.parse(res);
              setAccessToken(data.access_token);   //將accessToken存sessionStorage
              const {token} =data.access_token;
              config.headers['access-token']=getAccessToken();
              config.baseURL='';
              request.forEach(cb=>{
                    cb(token);
              });
              requests = [] ;
              return request(config);
      }).catch(err=>{
              console.log(err,'刷新token錯誤')
      }).finally(()=>{
              isRefreshing=false;   //標誌，爲了防止重複調用
      })
}

3.在請求攔截和error裏面判斷是否返回1401
    if(response.data.code === 1401){
          if(!isRefreshing){
                isRefreshing=true;
                handleRefreshToken(config);
          };
    };