vue前后端分离实现SSO单点登录（跨域）

最新推荐文章于 2024-04-28 15:51:58 发布

wjm0519

最新推荐文章于 2024-04-28 15:51:58 发布

阅读量2.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wjm0519/article/details/113744984

版权

本文介绍了一种使用Vue在www.a.com网站下通过iframe嵌入B网站登录页面，利用`postMessage`进行用户标识内容传递，从而实现SSO单点登录跨域的方法。然而，此方案仅涉及用户信息交互，尚未涵盖完整的SSO功能，如同步退出等。

摘要由CSDN通过智能技术生成

1.首先在a（www.a.com）网站下创建文件夹a.vue,通过iframe引入B网站登录页面

<iframe
      ref="iframe"
      src="http://www.b.com/#/login"
      style="height: 400px; width: 1200px; margin-bottom: 100px; display: none"
    ></iframe>

2.a 通过‘postMessage’传值给b网站 info为用户标识内容

this.$refs.iframe.contentWindow.postMessage(info, '*')

3.b网站接受值

window.addEventListener('message', function (e) {
      if (e.source !== window.parent) return
      if (e.type !== 'webpackWarnings') {
        // console.log(typeof e.data)
        if (typeof e.data === 'string') {
          // console.log(e.data)
          let res = JSON.parse(e.data)
          if (typeof res === 'object') {
            // console.log(1)
            localStorage.setItem('user', e.data)
            localStorage.setItem('toke