配置两端统一登录

甜甜呀呼

已于 2023-03-30 17:16:19 修改

阅读量139

点赞数

分类专栏：前端文章标签： javascript 前端 servlet

于 2023-03-30 17:05:32 首次发布

本文链接：https://blog.csdn.net/Sxyyy1/article/details/129861553

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章描述了一种通过事件监听和iframe实现跨域传递Token以及在路由守卫中进行登录状态验证的方法。在传token端，监听message事件并发送Token；在接收端，通过iframe获取Token并保存到本地存储，然后检查登录状态，过期则跳转到登录页面。

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

**

传token端:

注：window._CONFIG[‘tokenURL’] 是接收token端的地址
1.写到index.html中：

window.addEventListener('message', function(event) { 	         
	if (event.origin === window._CONFIG['tokenURL']) {
	    const { key } = event.data;
	    const value = localStorage.getItem(key);
	    event.source.postMessage({wallets: value}, event.origin);
	}
}, false);

2.跳转到接收token端时：

 window.open(window._CONFIG["tokenURL"] + "?type=isLogin");

3.路由守卫中：

if(to.query && to.fullPath == '/user/login?type=isLogout'){
    store.dispatch('Logout').then(() => {
      next({
        path: '/user/login',
        query: {
          redirect: '/'
        }
      })
    })
  }

接收token端：

**
注：window._CONFIG[‘tokenURL’] 是传token端的地址
1.写到index.html中：

<iframe id="bbb-iframe" src="传token端的地址" style="display:none;"></iframe>

2.路由守卫页面(在跳转进入之前判断是否已登录)
// 校验登录

router.beforeEach(function(to, from, next) {
  // 如果是从后台管理跳转过来的话走这个判断
  if(to.query && to.fullPath == '/?type=isLogin'){
    window.onload = function () {
      const bbbIframe = document.getElementById("bbb-iframe");
      bbbIframe.contentWindow.postMessage(
        { key: "pro__Access-Token" },
        window._CONFIG['tokenURL']
      );
    };
    window.addEventListener(
      "message",
      function (event) {
        if (event.origin === window._CONFIG['tokenURL']) {
          let tokenObj = JSON.parse(event.data.wallets),
            token = "",
            datas = {};
          if (tokenObj) {
            token = tokenObj.value;
            let paramss = { name: "token", value: token };
            datas = Object.assign(paramss, { startTime: new Date().getTime() });
          }
          localStorage.setItem("ACCESS_TOKEN", JSON.stringify(datas));
          //页面是否登录，本地存储中是否有token(uid)数据，否：跳转登录页面
          let item = localStorage.getItem("ACCESS_TOKEN");
          if (item) {
            item = JSON.parse(item);
            let date = new Date().getTime();
            // 如果大于就是过期了，如果小于或等于就还没过期
            if (date - item.startTime > EXPIRESTIME) {
                localStorage.removeItem('ACCESS_TOKEN');
                localStorage.removeItem('userInfo');
                window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
            } else {
              if (to.path === '/login' || to.path === '/') {
                next('/首页') 
              } else {
                next()
              }
            }
          } else {
            if (to.path === '/login') {
              window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
            } else {
              window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
            }
          }
        }
      },false);

  }else{
    //页面是否登录，本地存储中是否有token(uid)数据，否：跳转登录页面
    let item = localStorage.getItem("ACCESS_TOKEN");
    if (item) {
      item = JSON.parse(item);
      let date = new Date().getTime();
      // 如果大于就是过期了，如果小于或等于就还没过期
      if (date - item.startTime > EXPIRESTIME) {
          localStorage.removeItem('ACCESS_TOKEN');
          localStorage.removeItem('userInfo');
          // next('/login')
          window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
      } else {
        if (to.path === '/login' || to.path === '/' ) {
          next('/首页') 
        } else {
          next()
        }
      }
    } else {
      if (to.path === '/login') {
        // next()
        window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
      } else {
        // next('/login')
        window.location.href=window._CONFIG['tokenURL']+"/user/login?type=isLogout"
      }
    }
  }
  
});