webview嵌入H5登录态和小程序页登录态如何保持一致

背景

小程序整体内容是采用的web-view组件嵌入的H5。但是这样小程序的登录状态就无法长期保存；当过一短时间或者关闭小程序所属的APP进程后，下次再进入小程序又会再次登录，这样的用户体验不佳，于是就有了如下的解决方案。

解决方案

H5端向小程序发送token -> 小程序接收token，存在本地缓存 -> 下次打开小程序，从本地缓存拿到token，拼接到web-view组件src中 -> H5拦截token后设置登录态

小程序采用的Uni-App框架；H5是Nuxt框架。

在nuxt.config.js文件中中引入Uni-App的JSSDK（js.cdn.aliyun.dcloud.net.cn/dev/uni-app…

head: {
    script: [
      { src: 'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js' }
    ]
  }

2.登录成功后，向应用发送消息

if(isMiniWechat) {
    uni.postMessage({
      data: {
        token: token
      }
    })
}

3、在url中拦截token

app.router.beforeEach((to, from, next) => {
    if (to.query.token && isMiniWechat) {
      store.commit('SET_TOKEN', to.query.token)
    }
})

环境判断-微信小程序内

function isMiniWechat (UA) {
  return /miniProgram/i.test(UA) && /micromessenger/i.test(UA)
}

小程序

1、web-view组件接收H5发送的消息；获取到token后存储在本地缓存中

<web-view src="h5链接" @message="bindmessage"></web-view>

bindmessage(e) {
  const data = e.detail.data || []
  if (data.length) {
    const nuxtToken = data.find(item => item.token)
    nuxtToken && uni.setStorageSync('nuxt_token', nuxtToken);
  }
}

2、在设置web-view组件的src之前将token通过url传参

const token = uni.getStorageSync('nuxt_token');
if (token) {
    this.url = `h5链接?token=${token}`
} else {
    this.url = h5链接
}