背景:
最近实现一个功能需要在小程序嵌入其它系统内部的一个页面(用vue写的H5页面),但小程序是无法使用iframe的,所以最终选择小程序官方的webview实现,但是嵌入后一打开这个嵌入的页面就会自动跳转到H5的登录页,原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的,本文就是解决这个问题的。
选择的技术方案:
本地系统使用webview嵌入某个系统内部页面,那就证明被嵌入系统是安全的可使用的,所以可以通过通讯方式带一个token过去实现免登录,我用微信小程序项目嵌入vue的H5页面作为例子具体如下:
本地小程序系统
<web-view src="{{webUrl}}"/>
// webUrl: `https://×××××××××?token=${token}`
使用webview标签,webUrl是嵌入系统对应页面的url,可以通过url?后面传参数把参数带到对应的H5系统
被嵌入的H5系统(H5用vue实现)
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是非常危险的行为
- 上面接收方要在在APP.vue文件的created生命周期接收,在嵌入页面接收是不行的,这里与VUE的执行流程有关就不多说了