APP内嵌H5调用原生方法刷新token

最新推荐文章于 2024-05-06 16:39:37 发布

原创最新推荐文章于 2024-05-06 16:39:37 发布 · 3.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android #ios #vue.js

vue开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在APP内嵌H5页面中，如何通过判断系统环境调用原生方法来刷新token的技术方案。在Android和iOS环境下，分别调用不同的原生方法，并使用Promise封装处理异步回调，确保在获取到新token后进行后续请求操作。在Vue环境中，于组件创建时触发获取token的过程。

APP内嵌H5调用原生方法刷新token

场景：在某些app内嵌的H5页面，H5页面请求需要携带token，或者token过期需要刷新token,而token又不能通过url传参传入情况下，H5页面可以通过调用原生的方法，让APP给H5页面传入。

export const  getAppToken = ()=>{
  const promise = new Promise((resolve,reject)=>{
    //判断环境
    var u = navigator.userAgent
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    console.log('当前安卓环境');
    // 调用安卓app方法通知app刷新token并回调本地方法
    //（window.android.getToken()是与安卓开发约定好的他把getToken这个方法挂载到H5的window.android上）
    window.android.getToken()
  } else if (isiOS) {
    console.log('当前IOS环境');
    // 调用苹果app方法通知app刷新token并回调本地方法
    //（与ios开发约定好的方法名getToken，.postMessage("获取token")是传参）
    window.webkit.messageHandlers.getToken.postMessage("获取token");
  }
  //注册挂载全局方法等待app回调后resolve就可进行操作了
  window.getIosToken=(token) => {
    localStorage.setItem("testtkoen", token);
    resolve();
  };
})
return promise
}

代码原理：先判断苹果或者安卓系统，调用对应的原生APP方法，调用该方法后通知原生应用刷新token后再调用H5的方法进行传参（H5的方法挂在windows上APP可以直接调用）

用promise封装是为了获取到token后进行请求（我这app刷新token并回调回来是异步的有时间差）

整套业务逻辑（vue为例）

<template>
  <div class="test">
  </div>
</template>

<script>
import { getAppToken } from "../utils/getAppToken";
export default {
  data() {
    return {
    };
  },
  methods: {},
  created() {
    getAppToken().then(() => {
      //这里发送请求
    });
  },
};
</script>

<style>
</style>