美文网首页
记一次前端处理免登陆跳转

记一次前端处理免登陆跳转

作者: studentliubo | 来源:发表于2020-12-11 23:17 被阅读0次

需求场景:从A系统登录跳转到B系统,这个时候B系统不需要再重新登录。
实现方案:因为不需要后端处理,前端实现是否登录的判断,故选择使用h5的postMessage API,在A系统跳转时给B系统发送消息。
实现代码:

A系统

window.sender = window.open(url) // url:B系统的地址
const timer = setInterval(function () {
     window.sender.postMessage(str), url) // str:发送给B系统的参数
}, 200)

window.addEventListener('message', function (event) {
   if (event.data === 'success') {
     clearInterval(timer)
   }
}, false)

B系统

window.onmessage = function(e) {
  const isProduction = process.env.NODE_ENV === 'production'
  let flag = isProduction ? config.mainEntry.origin.includes(e.origin) : true
  // 本地调试
  if (e.origin.includes('localhost')) flag = true
  if (flag && e.data) {
    if (e.data.constructor !== String) return
    const data = JSON.parse(e.data)
    e.source.postMessage('success', e.origin)
    window.location.href = window.location.origin + window.location.pathname
    window.open(window.location.href, '_self')
  }
}

注意事项:

    1. 使用定时器的原因:B系统只要在加载完成以后才能收到A系统发送的消息,故需要不断的给B发消息,同时为了清除定时器,在B接收到消息后也需要给A发送一个回执消息,告知A已收到数据。
    1. 从A跳转到B时,最好在url上添加一些额外信息,比如:url?from=a,这么做是因为在B系统加载完成后需要走前端路由进行跳转,这个时候如果B还没有收到A发送的消息,那么这个跳转必须阻塞,直到接收到A的消息,然而我们可以通过url上的from参数来做判断。这也是为什么在B接收到消息以后要使用window.open重新加载一次原始url的原因。

相关文章

  • 记一次前端处理免登陆跳转

    需求场景:从A系统登录跳转到B系统,这个时候B系统不需要再重新登录。实现方案:因为不需要后端处理,前端实现是否登录...

  • vue2 axios 响应拦截器,状态码判断

    因新项目是个独立的模式开发,需要和老系统关联登陆信息。因此需要做第三方登陆sso,判断是否跳转登陆的时候 。前端需...

  • Arouter路由总结

    总结 Arouter路由,跨模块页面跳转,拦截跳转过程,处理登陆埋点逻辑,控制反转做组件解耦。 1,在组件化和模块...

  • linux ssh 免密登陆排查技巧

    场景: 使用ssh免密登陆配置的时候。做了相关配置之后,尝试ssh免密登陆,还是提示输入密码,无法免密登陆。也没有...

  • Spring Boot + Security实现简单验证登录操作

    利用spring security 实现简单的登陆验证,并且在登陆失败或者成功后进行对前端返回的处理。 GitHu...

  • 配置ssh免登陆

    1、生成ssh免登陆密钥 2、将公钥拷贝到要免登陆的机器上

  • Set-Cookie后,Cookie丢失问题解决

    问题 IE11下,从A域名跳转到B域名,B域名cookie丢失,无法正常跳转;每次都是先跳转到免登,免登成功(re...

  • uniapp云开发

    uni-clientDB 1、前端查询数据库,免登陆2、减少云函数数量3、云端控制能查什么表、什么字段,安全可控4...

  • Hadoop用户配置免密登陆

    Hadoop用户配置免密登陆,参考其他免密配置方法自己总结的更简洁的步骤。要实现A免密登陆B,需要把A生成的公钥放...

  • Window环境下使用sourceTree

    汉化版sourceTree下载 运行sourceTree需要登录,一直注册不了。免登陆教程 免登陆用到的文件acc...

网友评论

      本文标题:记一次前端处理免登陆跳转

      本文链接:https://www.haomeiwen.com/subject/sucobktx.html