门户与后台登录、退出

teaching_integration_platform_admin_template/.env.development

@@ -1,6 +1,7 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-# VITE_APP_BASE_API = 'http://127.0.0.1:8080'
-VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'
+VITE_APP_OTHER_ORIGIN = 'http://127.0.0.1:8866'
+# VITE_APP_BASE_API = 'http://39.106.16.162:8080'
 

teaching_integration_platform_admin_template/.env.production

@@ -1,3 +1,4 @@
 NODE_ENV = 'production'
 VITE_APP_TITLE = '无糖运营平台'
+VITE_APP_OTHER_ORIGIN = 'http://39.106.16.162:8866'
 # VITE_APP_BASE_API = '/prod-api'

teaching_integration_platform_admin_template/src/App.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-
 // import { useRouter, useRoute } from 'vue-router'
 // 在vue3 compositionAPI中
 // 1. 获取路由对象 router useRouter
@@ -17,6 +16,29 @@
 // import {} from 'vue'
 // import { useUserStore } from '@/stores/user.js'
 // const userStore = useUserStore()
+// ====================
+import useUserStore from './store/modules/user'
+import { nextTick } from 'vue'
+const userStore = useUserStore()
+
+nextTick(() => {
+  const opener = window.opener
+  if (opener) {
+    const handle = (token: any) => {
+      // 退出登录会刷新页面，也会走这里可以使得门户退出
+      opener.postMessage(token, import.meta.env.VITE_APP_OTHER_ORIGIN)
+    }
+    handle(userStore.token)
+    userStore.loginE.onLogin = handle
+  }
+})
+window.onmessage = e => {
+  if (e.origin === import.meta.env.VITE_APP_OTHER_ORIGIN) {
+    userStore.logout()
+    location.reload()
+  }
+}
+// ====================
 </script>
 
 <style lang="scss" scoped></style>

teaching_integration_platform_admin_template/src/store/modules/type/types.ts

@@ -8,4 +8,5 @@ export interface LoginStoreType {
   phone: string
   userInfo: object
   data: object
+  loginE: Record<'onLogin', null | (() => void)>
 }

teaching_integration_platform_admin_template/src/store/modules/user.ts

@@ -32,6 +32,7 @@ const useUserStore = defineStore('User', {
       phone: '',
       userInfo: {}, // 当前用户相关信息
       data: {},
+      loginE: { onLogin: null }
     }
   },
   actions: {
@@ -44,7 +45,7 @@ const useUserStore = defineStore('User', {
       })
       if (res.code === 200) {
         this.token = res.data.token as string
-        SET_TKOEN('TOKEN', this.token)
+        SET_TKOEN('TOKEN', this.token, this.loginE.onLogin)
         // localStorage.setItem('TOKEN', this.token)
         ElNotification({
           type: 'success',
@@ -68,7 +69,7 @@ const useUserStore = defineStore('User', {
       if (res.code === 200) {
         this.token = res.data.token as string //接收返回的token
         // @ts-expect-error
-        SET_TKOEN('TOKEN', this.token)
+        SET_TKOEN('TOKEN', this.token, this.loginE.onLogin)
         // localStorage.setItem('TOKEN', this.token)
         ElNotification({
           type: 'success',
@@ -107,7 +108,7 @@ const useUserStore = defineStore('User', {
       const usePermissionStore = permissionStore()
       // console.log(usePermissionStore)
       // 清除token
-      REMOVE_TOKEN('TOKEN'),
+      REMOVE_TOKEN('TOKEN', this.loginE.onLogin),
         // ;(this.userName = ''), (this.avatar = '')
         // @ts-expect-error
         (this.userName = ''),

teaching_integration_platform_admin_template/src/utils/token.ts

@@ -1,12 +1,15 @@
 // 设置token
-export const SET_TKOEN = (name: string, data: string) => {
+type OnLogin = null | ((token: any) => void)
+export const SET_TKOEN = (name: string, data: string, onLogin: OnLogin) => {
   localStorage.setItem(name, data)
+  if (onLogin) onLogin(data)
 }
 // 获取token
 export const GET_TKOEN = (name: string) => {
   return localStorage.getItem(name)
 }
 // 移除token
-export const REMOVE_TOKEN = (name: string) => {
+export const REMOVE_TOKEN = (name: string, onLogin: OnLogin) => {
   localStorage.removeItem(name)
+  if (onLogin) onLogin('')
 }

teaching_integration_platform_admin_template/src/views/home/index.vue

@@ -123,14 +123,8 @@ onMounted(() => {
   <el-row>
     <el-col :span="24">
       <div class="nav">
-        <welcome
-          :data="infoData"
-          :userData="userStore.data"
-          :name="name"
-          @get-message="getMessage"
-          @userInfoModified="fetchNewUserInfo"
-          v-if="flag"
-        ></welcome>
+        <welcome :data="infoData" :userData="userStore.data" :name="name" @get-message="getMessage"
+          @userInfoModified="fetchNewUserInfo" v-if="flag"></welcome>
       </div>
     </el-col>
   </el-row>
@@ -142,40 +136,30 @@ onMounted(() => {
     </el-col>
     <el-col :span="6">
       <div class="info">
-        <status
-          :data="userStore.data"
-          :userData="infoData"
-          @get-avater="getAvater"
-          @getInfo="getInfo"
-          v-if="flag"
-        ></status>
+        <status :data="userStore.data" :userData="infoData" @get-avater="getAvater" @getInfo="getInfo" v-if="flag">
+        </status>
       </div>
     </el-col>
   </el-row>
   <el-row :gutter="20">
     <el-col :span="6">
       <div class="lesson">
-        <a
-          href="#"
-          style="
+        <a href="#" style="
             font-size: 14px;
             display: flex;
             width: 90%;
             margin: 0px auto;
             /* margin: 0px 10px; */
             margin-bottom: 5px;
-          "
-        >
-          <conheader
-            :title="`学习最多知识点`"
-            :urouter="'/curriculumCenter/knowledgePoints'"
-          ></conheader>
+          ">
+          <conheader :title="`学习最多知识点`" :urouter="'/curriculumCenter/knowledgePoints'"></conheader>
         </a>
         <div class="contt">
           <!-- <p class="button" round v-for="item in topKnow" :key="item.id">
             {{ item.label }}
           </p> -->
-          <el-table :data="topKnow" border style="width: 100%" height="240" :header-cell-style="{'text-align':'center'}">
+          <el-table :data="topKnow" border style="width: 100%" height="240"
+            :header-cell-style="{ 'text-align': 'center' }">
             <el-table-column type="index" align=center label="序号" width="80" />
             <el-table-column prop="label" align=center label="课程名称" />
           </el-table>
@@ -184,23 +168,21 @@ onMounted(() => {
     </el-col>
     <el-col :span="6">
       <div class="lesson">
-        <a
-          href="#"
-          style="
+        <a href="#" style="
             width: 90%;
             font-size: 14px;
             display: flex;
             margin: 0 auto;
             margin-bottom: 5px;
-          "
-        >
+          ">
           <conheader :title="`推荐知识点`"></conheader>
         </a>
         <div class="contt">
           <!-- <p class="button" round v-for="item in maxKnow" :key="item.id">
             {{ item.label }}
           </p> -->
-          <el-table :data="maxKnow" border style="width: 100%" height="240" :header-cell-style="{'text-align':'center'}">
+          <el-table :data="maxKnow" border style="width: 100%" height="240"
+            :header-cell-style="{ 'text-align': 'center' }">
             <el-table-column type="index" align=center label="序号" width="80" />
             <el-table-column prop="label" align=center label="课程名称" />
           </el-table>
@@ -209,14 +191,8 @@ onMounted(() => {
     </el-col>
     <el-col :span="6">
       <div class="lesson">
-        <a
-          href="#"
-          style="width: 90%; font-size: 14px; display: flex; margin: 0 auto"
-        >
-          <conheader
-            :title="`推荐课程`"
-            :urouter="'/curriculumCenter/basicCourseInformation'"
-          ></conheader>
+        <a href="#" style="width: 90%; font-size: 14px; display: flex; margin: 0 auto">
+          <conheader :title="`推荐课程`" :urouter="'/curriculumCenter/basicCourseInformation'"></conheader>
         </a>
         <div class="con">
           <!-- <ul>
@@ -231,7 +207,8 @@ onMounted(() => {
               </div>
             </li>
           </ul> -->
-          <el-table :data="toplist" border style="width: 100%" height="240" :header-cell-style="{'text-align':'center'}">
+          <el-table :data="toplist" border style="width: 100%" height="240"
+            :header-cell-style="{ 'text-align': 'center' }">
             <el-table-column type="index" align=center label="序号" width="80" />
             <el-table-column prop="name" align=center label="课程名称" />
           </el-table>
@@ -240,14 +217,8 @@ onMounted(() => {
     </el-col>
     <el-col :span="6">
       <div class="lesson">
-        <a
-          href="#"
-          style="width: 90%; font-size: 12px; display: flex; margin: 0 auto"
-        >
-          <conheader
-            :title="`最新收藏课程`"
-            :urouter="'/curriculumCenter/basicCourseInformation'"
-          ></conheader>
+        <a href="#" style="width: 90%; font-size: 12px; display: flex; margin: 0 auto">
+          <conheader :title="`最新收藏课程`" :urouter="'/curriculumCenter/basicCourseInformation'"></conheader>
         </a>
         <div class="con">
           <!-- <ul>
@@ -262,7 +233,8 @@ onMounted(() => {
               </div>
             </li>
           </ul> -->
-          <el-table :data="courselist" border style="width: 100%" height="240" :header-cell-style="{'text-align':'center'}">
+          <el-table :data="courselist" border style="width: 100%" height="240"
+            :header-cell-style="{ 'text-align': 'center' }">
             <el-table-column type="index" align=center label="序号" width="80" />
             <el-table-column prop="name" align=center label="课程名称" />
           </el-table>
@@ -287,6 +259,7 @@ onMounted(() => {
 * {
   box-sizing: border-box;
 }
+
 .nav {
   height: 92px;
   background: #ffffff;
@@ -298,6 +271,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
+
 .classList,
 .info {
   // background-color: yellow;
@@ -309,10 +283,12 @@ onMounted(() => {
   align-items: center;
   margin-bottom: 16px;
 }
+
 .classList {
   display: flex;
   justify-content: space-between;
 }
+
 .lesson {
   padding-top: 30px;
   // padding-bottom: 30px;
@@ -326,6 +302,7 @@ onMounted(() => {
   text-overflow: ellipsis;
   // flex-direction: column;
 }
+
 .con {
   display: flex;
   // justify-content: space-between;
@@ -340,6 +317,7 @@ onMounted(() => {
   justify-content: space-evenly;
   padding-bottom: 30px;
 }
+
 .contt {
   // background-color: yellow;
   padding: 5px;
@@ -348,9 +326,11 @@ onMounted(() => {
   // grid-template-columns: repeat(2, 1fr);
   // grid-gap: 11px;
 }
+
 :deep(.el-scrollbar__wrap) {
   padding: 0;
 }
+
 .button {
   justify-content: space-between;
 
@@ -367,13 +347,16 @@ onMounted(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .button :hover {
   overflow: visible;
   white-space: normal;
 }
+
 a {
   text-decoration: none;
 }
+
 .some,
 .stu {
   padding-top: 5px;
@@ -387,6 +370,7 @@ a {
   justify-content: center;
   align-items: center;
 }
+
 // .lessonlist-content {
 //   display: flex;
 //   justify-content: center;
@@ -417,12 +401,14 @@ ul {
   justify-content: space-between;
   // align-items: center;
 }
+
 .lessonlist-item-img {
   width: 17%;
   height: 40px;
   justify-content: center;
   align-items: center;
 }
+
 .lessonlist-item-info {
   margin-left: 15px;
   width: 80%;
@@ -432,11 +418,13 @@ ul {
   // flex-direction: column;
   justify-content: space-between;
   align-items: center;
+
   h5 {
     // font-weight: bold;
     width: 80%;
     text-align: center;
   }
+
   p {
     font-size: small;
     width: 20%;

teaching_integration_platform_admin_template/src/views/login/index.vue

@@ -406,12 +406,16 @@ const login = async () => {
       isBtnLoading.value = false
       $router.push('/curriculumCenter/basicCourseInformation')
       channel.postMessage('')
+
+
       if ($route.query.redirect) {
         $router.push($route.query.redirect as string)
         channel.postMessage('')
+
       } else {
         $router.push('/')
         channel.postMessage('')
+
       }
     })
   } catch (error) {
@@ -433,12 +437,15 @@ const phoneLogin = async () => {
         isBtnLoading.value = false
         $router.push('/curriculumCenter/basicCourseInformation')
         channel.postMessage('')
+
         if ($route.query.redirect) {
           $router.push($route.query.redirect as string)
           channel.postMessage('')
+
         } else {
           $router.push('/')
           channel.postMessage('')
+
         }
       })
       .catch((error) => {

teaching_integration_platform_admin_template/vite.config.ts

@@ -20,6 +20,9 @@ export default ({ command }: any) => {
         symbolId: 'icon-[dir]-[name]',
       }),
     ],
+    server: {
+      host: '0.0.0.0',
+    },
     resolve: {
       alias: {
         '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src

teaching_integration_platform_template/.env.development

@@ -1,5 +1,6 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '教学一体化平台'
-# VITE_APP_BASE_API = 'http://127.0.0.1:8080'
-VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'
+VITE_APP_OTHER_ORIGIN = 'http://127.0.0.1:5173'
+# VITE_APP_BASE_API = 'http://39.106.16.162:8080'

teaching_integration_platform_template/.env.production

@@ -1,3 +1,4 @@
 NODE_ENV = 'production'
 VITE_APP_TITLE = '教学一体化平台'
+VITE_APP_OTHER_ORIGIN = 'http://39.106.16.162:5173'
 # VITE_APP_BASE_API = '/api'

teaching_integration_platform_template/src/Layout/tabbar/index.vue

@@ -12,11 +12,12 @@
             v-show="!item.meta.hidden" @click="goToRouter(item, index)" :key="item.path">
             <div>{{ item.meta.title }}</div>
           </li>
-          <div v-if="isLogin">
-            <img :src="data.icon" alt="" style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
+          <div v-if="userStore.isLogin">
+            <img :src="userStore.userInfo.icon" alt=""
+              style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
             <el-dropdown @command="handleCommand">
               <span class="el-dropdown-link" style="color: #fff;">
-                {{ data.username }}
+                {{ userStore.userInfo.username }}
                 <el-icon class="el-icon--right">
                   <arrow-down />
                 </el-icon>
@@ -28,7 +29,8 @@
               </template>
             </el-dropdown>
           </div>
-          <li v-else @click="skip('http://localhost:5173/#/login?redirect=/configurationPage')">登录注册</li>
+          <li v-else @click="send">登录注册</li>
+          <!-- skip('http://localhost:5173/#/login?redirect=/configurationPage') -->
           <!-- <li v-if="$route.path != '/home'" @click="$router.push('/')">回到首页</li> -->
         </ul>
         <div class="entry">
@@ -50,7 +52,7 @@ import useUserStore from '@/store/module/user';
 const userStore = useUserStore()
 import { constRouter } from '@/router/module/constRouter'
 import { useRouter, useRoute } from 'vue-router'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import useSettingStore from '@/store/module/setting'
 const $router = useRouter()
 const $route = useRoute()
@@ -72,23 +74,38 @@ onMounted(() => {
     }
   })
 })
-const isLogin = ref(false)
-const data = ref<any>({})
-userGetInfoService(userStore.token).then(res => {
-  // @ts-ignore
-  if (res.code === 200) {
-    isLogin.value = true
-    data.value = res.data
-  }
-})
 function skip(url: string) {
   location.assign(url)
 }
 
 
+// ========================
+let otherWin: any = null;
+function send() {
+  if (otherWin) {
+    otherWin.focus();
+    return
+  }
+  otherWin = window.open(import.meta.env.VITE_APP_OTHER_ORIGIN)
+
+}
+window.onmessage = e => {
+  if (e.origin === import.meta.env.VITE_APP_OTHER_ORIGIN) {
+    userStore.setToken(e.data)
+    userStore.setUserInfo()
+  }
+}
+// ========================
 // 退出登录
 function logout() {
-  isLogin.value = false
+  try {
+    otherWin.postMessage('logout', import.meta.env.VITE_APP_OTHER_ORIGIN)
+  } catch (error) {
+    send()
+    setTimeout(() => {
+      otherWin.postMessage('logout', import.meta.env.VITE_APP_OTHER_ORIGIN)
+    }, 500)
+  }
 }
 const handleCommand = (command: string) => {
   switch (command) {

teaching_integration_platform_template/src/store/module/user.ts

@@ -4,21 +4,39 @@ import { ref, reactive } from 'vue'
 const userStore = defineStore('userStore', () => {
   const userInfo = reactive<any>({})
   const isLogin = ref(false)
-  const token = ref('')
+  const token = ref(localStorage.getItem('TOKEN') || '')
   const verifyToken = () => { }
-
-  userGetInfoService(token.value).then(res => {
+  const clearUserInfo = () => {
+    Object.keys(userInfo).forEach(function (prop) {
+      delete userInfo[prop];
+    });
+  }
+  const setToken = (data: string) => {
+    token.value = data    
+    localStorage.setItem('TOKEN', data)
+  }
+  const setUserInfo = async () => {
+    try {
+      const res = await userGetInfoService(token.value)
       // @ts-ignore
       if (res.code === 200) {
         Object.assign(userInfo, res.data)
         isLogin.value = true
+      } else isLogin.value = false
+    } catch (error) {
+      isLogin.value = false
+      clearUserInfo()
     }
-  })
+  }
+  setUserInfo()
   return {
     token,
+    setToken,
     userInfo,
     isLogin,
-    verifyToken
+    verifyToken,
+    setUserInfo,
+    clearUserInfo
   }
 })
 export default userStore