内嵌h5登录失效后,再次登录刷新当前页面

1,005 阅读1分钟

问题:

  • a手机登录APP,在浏览内嵌的h5页面,账号突然被B手机登录。

  • a手机继续浏览请求接口时,后端返回登录失效,请重新登录。

  • 跳转到APP的登录页面,登录成功后,返回h5的页面,并没有重新请求接口,获取数据

解决办法:

h5页面与APP一般通过jsBridge相连,当登录成功,APP会通过jsBridge来给h5页面传递token。那么在接收token的时候,我们进行判断要不要让页面reload即可。

注意: 这里的token要放在cookie里面或者localStorage里面呦~防止刷新后,token没有了,陷入无限死循环

代码逻辑:

 //首先在接收jsBridge传来的token的方法里进行判断,然后bus传值
 if(data.tag === LoginTag){
    if(data.data){
      bus.$emit('login', true)  //传来了token
    }else{
      bus.$emit('login', false)  //没有传来token
    }
 }
 
 //然后在APP.vue的create方法里进行判断
    bus.$on('login', (login) => {
      if (login) {
        location.reload();
      } 
    })

完工~