在.vue中引入部署到服务器上的另一个项目的.html静态文件，并实时传递token，和刷新页面

概要

在.vue中引入部署到服务器上的另一个项目的.html静态文件，并实时传递token，和刷新页面。

实现流程

步骤：
1、在.vue文件中通过iframe标签引入.html文件

<iframe
      class="ifram_careprov"
      id="careprov_query"
      name="careprov_query"
      :src="careprovUrl"
      width="100%"
      height="100%"
      ref="careprovIframeDom"
    ></iframe>

2、在.vue文件的script中监听token变化并将token作为url的参数实时传到.html文件中。【传递参数也可以通过postmessage传递，但项目层级可能有多层，因此在.html文件中监听不到传过来的参数。】

3、在.html文件中所引入的.js文件中对.vue传过来的token参数进行解析，就可以实时获得最新的token。

var token = window.location.href.split('token=')[1]
var oldToken = JSON.parse(sessionStorage.getItem("pro__access-token")).value
sessionStorage.setItem("pro__access-token",JSON.stringify({value:token}))
sessionStorage.setItem("pro__refresh-token",JSON.stringify({value:token}))

4、难点：当vue项目提示token过期后会自动跳转到登录页，再次登录后由于路由链接到的页面是iframe引入的外部资源时，页面仍然会有token过期的弹窗，主要是因为浏览器缓存的问题，因此必须通过location.reload()强制刷新页面。实现如下：
在.html文件引入的.js中，通过判断过期前和过期登录后的token是否一致来刷新页面，

var token = window.location.href.split('token=')[1]
var oldToken = JSON.parse(sessionStorage.getItem("pro__access-token")).value
sessionStorage.setItem("pro__access-token",JSON.stringify({value:token}))
sessionStorage.setItem("pro__refresh-token",JSON.stringify({value:token}))
if (oldToken != token && oldToken != undefined) {
    location.reload()
}

总结：vue引入外部html文件有两大难点。1、涉及token过期时，如何实时传递token到html文件中，实现数据交互。2、token过期后，页面如何实现reload，处理不好可能会导致页面刷新死循环【本文是通过判断前后token来解决页面刷新问题的】