单点登录的登出功能

.env

@@ -2,7 +2,7 @@
 VITE_APP_TITLE=智慧轮渡大数据平台
 
 # 项目本地运行端口号
-VITE_PORT=82
+VITE_PORT=80
 
 
 # open 运行 npm run dev 时自动打开浏览器

src/locales/zh-CN.ts

@@ -151,6 +151,7 @@ export default {
   },
   router: {
     login: '登录',
+    logout: '登出',
     socialLogin: '社交登录',
     home: '首页',
     analysis: '分析页',

src/permission.ts

@@ -53,7 +53,8 @@ const whiteList = [
   '/auth-redirect',
   '/bind',
   '/register',
-  '/oauthLogin/gitee'
+  '/oauthLogin/gitee',
+  '/logout'
 ]
 
 // 路由加载前

src/router/modules/remaining.ts

@@ -184,6 +184,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/logout',
+    component: () => import('@/views/Login/Logout.vue'),
+    name: 'Logout',
+    meta: {
+      hidden: true,
+      title: t('router.logout'),
+      noTagsView: true
+    }
+  },
   {
     path: '/sso',
     component: () => import('@/views/Login/components/SSOLoginCustom.vue'),

src/views/Login/Login.vue

@@ -1,12 +1,7 @@
 <template>
-  <div
-    :class="prefixCls"
-    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
-  >
+  <div :class="prefixCls" class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px">
     <div class="relative mx-auto h-full flex">
-      <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
-      >
+      <div :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`">
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
           <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> -->
@@ -14,11 +9,7 @@
         </div>
         <!-- 左边的背景图 + 欢迎语 -->
         <div class="h-[calc(100%-60px)] flex items-center justify-center">
-          <TransitionGroup
-            appear
-            enter-active-class="animate__animated animate__bounceInLeft"
-            tag="div"
-          >
+          <TransitionGroup appear enter-active-class="animate__animated animate__bounceInLeft" tag="div">
             <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
             <div key="2" class="text-3xl text-white" style="text-align: center;">{{ t('login.welcome') }}</div>
             <!-- <div key="3" class="mt-5 text-14px font-normal text-white">
@@ -29,9 +20,7 @@
       </div>
       <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
         <!-- 右上角的主题、语言选择 -->
-        <div
-          class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
-        >
+        <div class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end">
           <div class="flex items-center at-2xl:hidden at-xl:hidden">
             <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> -->
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
@@ -44,8 +33,7 @@
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
-          >
+            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px">
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 手机登录 -->
@@ -63,27 +51,27 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { underlineToHump } from '@/utils'
+  import { underlineToHump } from '@/utils'
 
-import { useDesign } from '@/hooks/web/useDesign'
-import { useAppStore } from '@/store/modules/app'
-import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
-import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+  import { useDesign } from '@/hooks/web/useDesign'
+  import { useAppStore } from '@/store/modules/app'
+  import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+  import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 
-import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
+  import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
 
-defineOptions({ name: 'Login' })
+  defineOptions({ name: 'Login' })
 
-const { t } = useI18n()
-const appStore = useAppStore()
-const { getPrefixCls } = useDesign()
-const prefixCls = getPrefixCls('login')
+  const { t } = useI18n()
+  const appStore = useAppStore()
+  const { getPrefixCls } = useDesign()
+  const prefixCls = getPrefixCls('login')
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-login;
+  $prefix-cls: #{$namespace}-login;
 
-.#{$prefix-cls} {
+  .#{$prefix-cls} {
     overflow: auto;
 
     &__left {
@@ -100,5 +88,5 @@ $prefix-cls: #{$namespace}-login;
         content: '';
       }
     }
-}
+  }
 </style>

src/views/Login/Logout.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-if="false">正在退出登录......</div>
+</template>
+<script lang="ts" setup>
+  import { ElLoading } from 'element-plus'
+  
+  import { useUserStore } from '@/store/modules/user'
+  import { useTagsViewStore } from '@/store/modules/tagsView'
+  const { replace } = useRouter()
+  const loading = ElLoading.service({
+    lock: true,
+    text: '',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  const loginOut = async () => {
+    try {
+      await useUserStore().loginOut()
+      useTagsViewStore().delAllViews()
+      replace('/login?redirect=/index')
+      loading.close()
+    } catch { }
+  }
+  loginOut()
+
+</script>
+<style lang="scss" scoped></style>