微前端共享token

src/hooks/useMainMicro.ts

@@ -1,5 +1,6 @@
 import WujieVue from 'wujie-vue3'
 import { isMicro, microList } from '@/config/mainMicro'
+import { useUserStore } from '@/stores/user'
 import router from '@/router'
 import type { App } from 'vue'
 
@@ -22,8 +23,8 @@ export const useMainMicro = (microName?: string) => {
     )
   }
 
+  // 主服务初始化微服务
   const initMicro = (app: App) => {
-    // 主服务初始化微服务
     if (!isMicro) {
       const { setupApp, preloadApp, bus } = WujieVue
 
@@ -41,6 +42,11 @@ export const useMainMicro = (microName?: string) => {
           router.push({ path: mainPath })
         }
       })
+      // 监听退出登录
+      bus.$on('logout', () => {
+        const userStore = useUserStore()
+        userStore.logout()
+      })
 
       app.use(WujieVue)
     }

src/router/guard.ts

@@ -1,6 +1,7 @@
 import type { Router } from 'vue-router'
 import { useRouterStore } from '@/stores/router'
 import { useUserStore } from '@/stores/user'
+import { logout, getToken } from '@/utils/micro'
 
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
@@ -11,7 +12,7 @@ const title = useTitle()
 const createRouterGuard = (router: Router) => {
   router.beforeEach(async (to, from) => {
     const userStore = useUserStore()
-    const token = userStore.token
+    const token = getToken()
 
     NProgress.start()
     if (to.meta?.title) {

src/stores/user.ts

@@ -1,5 +1,6 @@
 import router from '@/router'
 import { login } from '@/api/user'
+import { isMicro } from '@/config/mainMicro'
 
 export const useUserStore = defineStore({
   id: 'user',
@@ -8,9 +9,7 @@ export const useUserStore = defineStore({
       orgName: '山西方是科技股份有限公司 '
     },
     flag: false,
-    token:
-      localStorage.getItem('token') ||
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiI1NjQ0MzBmMDNhYWU0NmExODE2YmU1YmI4NDExY2RmNiIsImV4cCI6MTcwMjcxMTcyMSwiaWF0IjoxNzAyNjI1MzIxfQ.yqs-7RBbLr7G9p1JZ4VX753fHc0etGkubylBtvZL-Ek'
+    token: useStorage('token', '')
   }),
   actions: {
     async getUserInfo() {
@@ -23,14 +22,13 @@ export const useUserStore = defineStore({
       const res: any = await login(data)
       this.token = res.token
       this.user = res.user
-      localStorage.setItem('token', this.token)
 
       router.replace({ path: (router.currentRoute.value.query.redirect as string) || '/' })
     },
     logout() {
-      localStorage.removeItem('token')
-      sessionStorage.removeItem('globalTabs')
       this.$reset()
+      this.token = ''
+      sessionStorage.removeItem('globalTabs')
       router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
     }
   }

src/utils/micro.ts

@@ -0,0 +1,20 @@
+import { isMicro } from '@/config/mainMicro'
+import { useUserStore } from '@/stores/user'
+
+export const logout = () => {
+  if (isMicro) {
+    window.$wujie?.bus.$emit('logout')
+  } else {
+    const userStore = useUserStore()
+    userStore.logout()
+  }
+}
+
+export const getToken = () => {
+  if (isMicro) {
+    return window.$wujie?.props?.token
+  } else {
+    const userStore = useUserStore()
+    return userStore.token
+  }
+}

src/utils/request.ts

@@ -1,7 +1,7 @@
 import axios from 'axios'
-import { useUserStore } from '@/stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ACCESS_TOKEN } from '@/utils/constants'
+import { logout, getToken } from '@/utils/micro'
 
 const request = axios.create({
   baseURL: import.meta.env.VITE_BASE_API
@@ -11,7 +11,6 @@ const request = axios.create({
 const errorHandler = (error: any) => {
   const status = error.response.status
   const data = error.response.data
-  const userStore = useUserStore()
 
   if (status === 400) {
     ElMessage.error(data.msg)
@@ -22,7 +21,7 @@ const errorHandler = (error: any) => {
       center: true,
       confirmButtonText: '重新登录'
     }).then(() => {
-      userStore.logout()
+      logout()
     })
   } else if (status === 403) {
     ElMessage.error('无权限访问')
@@ -36,8 +35,7 @@ const errorHandler = (error: any) => {
 }
 
 request.interceptors.request.use(config => {
-  const userStore = useUserStore()
-  const token = 'Bearer ' + userStore.token
+  const token = 'Bearer ' + getToken()
   config.headers = config.headers || {}
 
   if (token) {
@@ -53,8 +51,7 @@ request.interceptors.response.use(res => {
     return data
   } else {
     if (data.code === 201 && data.msg === '登录超时，请登录') {
-      const userStore = useUserStore()
-      userStore.logout()
+      logout()
     } else {
       ElMessage.error(data.msg)
     }

src/views/micro/Micro.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useMainMicro } from '@/hooks/useMainMicro'
+import { useUserStore } from '@/stores/user'
+
+const userStore = useUserStore()
 
 const microName = 'system'
 const { micro, initWatch } = useMainMicro(microName)
@@ -9,7 +12,14 @@ const route = useRoute()
 </script>
 
 <template>
-  <WujieVue width="100%" height="100%" :name="microName" :url="micro.url + route.path" :sync="true"></WujieVue>
+  <WujieVue
+    width="100%"
+    height="100%"
+    :name="microName"
+    :url="micro.url + route.path"
+    :sync="true"
+    :props="{ token: userStore.token }"
+  ></WujieVue>
 </template>
 
 <style lang="scss" scoped></style>