vue伪(微)前端开发指南:element-admin + sso + iframe 系统嵌套

吃三个汉堡

已于 2022-06-23 18:06:30 修改

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： import this 文章标签： javascript vue.js es6 jquery 前端

于 2021-06-26 10:46:10 首次发布

本文链接：https://blog.csdn.net/bosslay/article/details/118242580

最近组内开发了一套数字中台的后台管理系统,该系统作为入口系统 ,可以在系统内访问其他子系统的页面,所有的系统集成了sso 单点登录,因此子系统嵌入的页面不再需要校验登录逻辑,除非token令牌已经失效,有相关的逻辑处理.踩了一些坑,比如内嵌系统因为浏览器cookie缓存机制,需要将token令牌存储机制改为sessionStorage等等;
在这里插入图片描述

1.内嵌页面在所属系统内的资源设置(路由动态返回)

归属系统在UAC(资源配置系统)单独配置内嵌页的资源,将内嵌页提到一级路由,资源src直接指向内嵌页组件对象而不是Layout,这样可以避免内嵌页面显示所属系统的布局Layout(面包屑,导航,侧边栏等);单独配置的内嵌页面资源可以设置隐藏,这样在归属系统内就不显得冲突(—如果原系统也需要维护内嵌页面资源的话),嵌入页面的按钮权限在UAC自行配置

1.1配置参考(e.g UAC配置子系统工厂配置)

1.2效果(e.g 工厂配置,子系统内访问效果)

在这里插入图片描述

1.39(嵌入园区工厂配置后中台内访问效果)

–图片挂了自行脑补

2.中台集成内嵌页面相关逻辑

集成内嵌页面是通过封装好的iframe组件,iframe 的src资源地址指向归属系统的login页面,并且在url中拼接了redirect(登录后要跳转的页面)以及中台的token令牌,因为现在各系统都是通过sso单点登录,因此token通用,在嵌入页归属系统中只需要从url拿到token令牌,不必触发本身登录的逻辑.子系统需要在路由守卫中,有token的情况下多加一层判定当前是否是嵌入在iframe页面,如果是,清空当前token,带参跳转login页面,在login页面需要处理处理(1.存储要跳转的链接,2.localstorage存储token,3.跳转redirect页面),注意,由于cookie跨域限制,内嵌页在中台iframe里不能获取cookie里存储的token,因此建议将store存储token的相关逻辑修改为local storage存储

2.1 子系统login页面逻辑参考(只处理逻辑,不需要视图样板)

<script>
import {
   
    getQueryObject } from "@/utils";
export default {
   
   
  name: "Login",
  mounted() {
   
   
    const urlParams = getQueryObject();
    if (urlParams.redirect)
      localStorage.setItem("redirectUrl", urlParams.redirect);
    if (urlParams.token) {
   
   
      // sso 单点登录返回 携带token
      this.$store.dispatch("user/login", urlParams.token).then(() => {
   
   
        const redirectUrl = localStorage.getItem("redirectUrl") || "/";
        this.$router.push({
   
   
          path: redirectUrl
        });
      });
    } else {
   
   
      // 没有token 也不是sso跳转返回 => sso单点登录
      const current = `${
     
     window.location.href.split("?")[0]}`;
      window.location.href = `http://sso/login?redirect_url=${
     
     current.replace(
        "#",
        "%23"
      )}`;
    }
  },
  render(h) {
   
   
    return h();
  },
};
</script>

2.2 园区路由守卫逻辑参考(permission.js)

router.beforeEach(async (to, from, next) => {
   
   
  // start progress bar
  NProgress.start();

  // set page title
  document.title = getPageTitle(to.meta