增加嵌入问题

ldlz-web/.env.production

@@ -5,4 +5,4 @@ VUE_APP_TITLE = 领导履职管理系统
 ENV = 'production'
 
 # 领导履职管理系统/生产环境
-VUE_APP_BASE_API = '/bnsapi'
+VUE_APP_BASE_API = '/hncloud/ldlz'

ldlz-web/src/layout/components/AppMain.vue

@@ -10,20 +10,20 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
+      return this.$route.path;
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -35,6 +35,10 @@ export default {
   overflow: hidden;
 }
 
+.embedded .app-main {
+  min-height: 100vh;
+}
+
 .fixed-header + .app-main {
   padding-top: 50px;
 }

ldlz-web/src/layout/index.vue

@@ -1,111 +1,133 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    :class="classObj"
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+    class="app-wrapper"
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+    :style="{ '--current-color': theme }"
-      <div :class="{'fixed-header':fixedHeader}">
+  >
-        <navbar/>
+    <div
-        <tags-view v-if="needTagsView"/>
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar v-if="!sidebar.hide && !isEmbedded" class="sidebar-container" />
+    <div
+      :class="{
+        hasTagsView: needTagsView,
+        sidebarHide: sidebar.hide || isEmbedded,
+        embedded: isEmbedded,
+      }"
+      class="main-container"
+    >
+      <div v-if="!isEmbedded" :class="{ 'fixed-header': fixedHeader }">
+        <navbar />
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
+      <app-main />
-      <right-panel>
+      <right-panel v-if="!isEmbedded">
-        <settings/>
+        <settings />
       </right-panel>
     </div>
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
+import RightPanel from "@/components/RightPanel";
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
-import ResizeMixin from './mixin/ResizeHandler'
+import ResizeMixin from "./mixin/ResizeHandler";
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
-import variables from '@/assets/styles/variables.scss'
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
-      theme: state => state.settings.theme,
+      theme: (state) => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
+      sideTheme: (state) => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
+      sidebar: (state) => state.app.sidebar,
-      device: state => state.app.device,
+      device: (state) => state.app.device,
-      needTagsView: state => state.settings.tagsView,
+      needTagsView: (state) => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
+    isEmbedded() {
+      // 检查 URL 参数中是否有 embedded=true 或者当前处于 iframe 中
+      return (
+        this.$route.query.embedded === "true" || window.self !== window.top
+        // true
+      );
+    },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
+        mobile: this.device === "mobile",
-      }
+      };
     },
     variables() {
       return variables;
-    }
+    },
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "~@/assets/styles/variables.scss";
 
-  .app-wrapper {
+.app-wrapper {
-    @include clearfix;
+  @include clearfix;
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
+  &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
+.drawer-bg {
-    width: calc(100% - 54px);
+  background: #000;
-  }
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
+.fixed-header {
-    width: 100%;
+  position: fixed;
-  }
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
+.hideSidebar .fixed-header {
-    width: 100%;
+  width: calc(100% - 54px);
-  }
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

ldlz-web/src/permission.js

@@ -1,58 +1,85 @@
-import router from './router'
+import router from "./router";
-import store from './store'
+import store from "./store";
-import { Message } from 'element-ui'
+import { Message } from "element-ui";
-import NProgress from 'nprogress'
+import NProgress from "nprogress";
-import 'nprogress/nprogress.css'
+import "nprogress/nprogress.css";
-import { getToken } from '@/utils/auth'
+import { getToken, setToken } from "@/utils/auth";
-import { isRelogin } from '@/utils/request'
+import { isRelogin } from "@/utils/request";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
-
+const whiteList = ["/login", "/register", "/ywgllogin"];
-const whiteList = ['/login', '/register','/ywgllogin']
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
+
+  // 如果是嵌入模式，尝试从父窗口获取 token
+  if (window.self !== window.top) {
+    try {
+      // 只有同源才能访问 window.parent.sessionStorage
+      const parentToken = window.parent.sessionStorage.getItem("Admin-Token");
+      if (parentToken && !getToken()) {
+        store.commit("SET_TOKEN", parentToken);
+        setToken(parentToken);
+      }
+    } catch (e) {
+      const parentToken = localStorage.getItem("Admin-Token");
+      if (parentToken && !getToken()) {
+        store.commit("SET_TOKEN", parentToken);
+        setToken(parentToken);
+      }
+    }
+  } else {
+    const parentToken = localStorage.getItem("Admin-Token");
+    if (parentToken && !getToken()) {
+      store.commit("SET_TOKEN", parentToken);
+      setToken(parentToken);
+    }
+  }
+
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
+    if (to.path === "/login") {
-      next({ path: '/' })
+      next({ path: "/" });
-      NProgress.done()
+      NProgress.done();
     } else if (whiteList.indexOf(to.path) !== -1) {
-      next()
+      next();
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
+        store
-          isRelogin.show = false
+          .dispatch("GetInfo")
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+          .then(() => {
-            // 根据roles权限生成可访问的路由表
+            isRelogin.show = false;
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+              // 根据roles权限生成可访问的路由表
-          })
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
-        }).catch(err => {
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
-            store.dispatch('LogOut').then(() => {
+            });
-              Message.error(err)
-              next({ path: '/' })
-            })
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        next();
       }
     }
   } else {
     // 没有token
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
-      NProgress.done()
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
+  NProgress.done();
-})
+});