原生小程序用webview嵌入H5页面实现免登录（H5用vue实现）

天天鸭2024-07-20 19:41

背景：

之前工作上某个项目因为要使用甲方提供的指定插件，但插件无法在原生小程序框架使用只能在vue使用叫我想办法解决，我当场：一脸？？？？？后来想到了一个方案，我直接把页面写在他们的其它vue项目再用iframe嵌入不就行了？我真的是太机智了，但发现小程序是无法使用iframe的，所以最终选择小程序官方的webview实现，但是嵌入后一打开这个嵌入的页面就会自动跳转到H5的登录页，原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的，本文就是解决这个问题的。

选择的技术方案：

本地系统使用webview嵌入某个系统内部页面，那就证明被嵌入系统是安全的可使用的，所以可以通过通讯方式带一个token过去实现免登录，我用微信小程序项目嵌入vue的H5页面作为例子具体如下：

本地小程序系统

ini 复制代码

<web-view src="{{webUrl}}"/>

// webUrl: `https://×××××××××?token=${token}`

直接使用webview标签，webUrl是嵌入系统对应页面的url,可以通过url？后面传参数把参数带到对应的H5系统

被嵌入的H5系统（H5用vue实现）

javascript 复制代码

created() {
    // H5获取token
    const wxobj = {}
    window.location.href.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (wxobj[k] = v))
    if ( wxobj.token) {
      store.commit( 'user/setToken', wxobj.token)
    }
}

被嵌入页面在App.vue文件created生命周期获取到token放到缓存中就能做到免登录了

注意：

传参数的时候最好把token加密一下，否则直接显示在url后面是很危险的
上面接时要在vue项目APP.vue文件的created生命周期中接收，在嵌入页面接收是不行的，这里与vue的初始化执行流程有关以后找时间单独发言说明，这里就不多说了