feat:[登录] 锁屏，只允许同时1个地方登录

src/App.vue

@@ -7,10 +7,115 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker"
+import { checkStatus } from "@/api/system/user"
 
 export default {
   name: "App",
-  components: { ThemePicker }
+  components: { ThemePicker },
+  data() {
+    return {
+      statusCheckTimer: null
+    }
+  },
+  
+  computed: {
+    // // 监听登录状态
+    // isLoggedIn() {
+    //   return this.$store.getters.token && this.$store.getters.token !== ''
+    // }
+  },
+  
+  watch: {
+    // // 监听登录状态变化
+    // isLoggedIn(newVal, oldVal) {
+    //   console.log('登录状态变化:', newVal, oldVal)
+    //   if (newVal) {
+    //     // 用户已登录，启动轮询
+    //     this.startStatusCheck()
+    //   } else {
+    //     // 用户已退出，停止轮询
+    //     this.stopStatusCheck()
+    //   }
+    // },
+    // 监听token
+    '$store.getters.token': {
+      handler(newToken, oldToken) {
+        console.log('token变化:', newToken, oldToken)
+        if (newToken) {
+          // 有token，启动轮询
+          this.startStatusCheck()
+        } else {
+          // token为空，停止轮询
+          this.stopStatusCheck()
+        }
+      },
+      immediate: true // 立即执行一次，这样在页面刷新时，如果已经有token，就会启动轮询
+    }
+  },
+  
+  mounted() {
+    // // 页面加载时检查当前登录状态
+    // if (this.isLoggedIn) {
+    //   this.startStatusCheck()
+    // }
+  },
+  
+  beforeDestroy() {
+    this.stopStatusCheck()
+  },
+  
+  methods: {
+    startStatusCheck() {
+      // 先停止可能存在的定时器
+      this.stopStatusCheck()
+      
+      console.log('启动状态检查轮询')
+      
+      // 立即执行一次检查
+      this.checkStatusImmediate()
+      
+      // 设置定时器每秒检查一次
+      this.statusCheckTimer = setInterval(() => {
+        this.checkStatus()
+      }, 10000)
+    },
+    
+    stopStatusCheck() {
+      if (this.statusCheckTimer) {
+        console.log('停止状态检查轮询')
+        clearInterval(this.statusCheckTimer)
+        this.statusCheckTimer = null
+      }
+    },
+    
+    // 立即检查（不等待）
+    async checkStatusImmediate() {
+      await this.checkStatus()
+    },
+    
+    // 定时检查
+    async checkStatus() {
+      // 再次确认登录状态
+      // if (!this.isLoggedIn) {
+      //   this.stopStatusCheck()
+      //   return
+      // }
+      
+      try {
+        console.log('开始checkStatus')
+        checkStatus().then(response => {
+          console.log(JSON.stringify(response))
+        }).catch(err => {
+          console.log(JSON.stringify(err))
+          if(err==='无效的会话，或者会话已过期，请重新登录。'){
+            this.stopStatusCheck()
+          }
+        })
+
+      } catch (error) {
+      }
+    },
+  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss">

src/api/system/user.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import { parseStrEmpty } from "@/utils/ruoyi";
+import { parseStrEmpty } from '@/utils/ruoyi'
 
 // 查询用户列表
 export function listUser(query) {
@@ -134,3 +134,12 @@ export function deptTreeSelect() {
     method: 'get'
   })
 }
+
+// 检查登录状态
+export function checkStatus(query) {
+  return request({
+    url: '/system/user/checkStatus',
+    method: 'get',
+    params: query
+  })
+}

src/utils/request.js

@@ -1,11 +1,12 @@
 import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import { Notification, MessageBox, Message, Loading, Dialog } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
+import i18n from '@/lang'
 
 let downloadLoadingInstance
 // 是否显示重新登录
@@ -106,25 +107,118 @@ service.interceptors.response.use(
       return res.data
     }
     if (code === 401) {
+      store.dispatch('LogOut').then(() => {
+        // location.href = '/user/work'
+      })
       if (!isRelogin.show) {
         isRelogin.show = true
-        MessageBox.confirm(
-          '登录状态已过期，您可以继续留在该页面，或者重新登录',
-          '系统提示',
+
+        // MessageBox.confirm(
+        //   '登录状态已过期，您可以继续留在该页面，或者重新登录',
+        //   '系统提示',
+        //   {
+        //     confirmButtonText: '重新登录',
+        //     cancelButtonText: '取消',
+        //     type: 'warning'
+        //   }
+        // )
+        //   .then(() => {
+        //     isRelogin.show = false
+        //     store.dispatch('LogOut').then(() => {
+        //       location.href = '/user/work'
+        //     })
+        //   })
+        //   .catch(() => {
+        //     isRelogin.show = false
+        //   })
+
+        MessageBox.prompt(
+          '登录状态已过期，您可以输入密码进入页面，或者取消',
+          '提示',
           {
-            confirmButtonText: '重新登录',
+            confirmButtonText: '进入页面',
             cancelButtonText: '取消',
-            type: 'warning'
+            inputPattern: /^\S+$/,
+            inputErrorMessage: '请输入密码',
+            showClose: false,
+            closeOnPressEscape: false,
+            closeOnClickModal: false,
+            beforeClose: (action, instance, done) => {
+              if (action === 'confirm') {
+                let password = instance.inputValue
+                store
+                  .dispatch('Login', {
+                    username: store.getters.name,
+                    password: password,
+                    force: false
+                  })
+                  .then(() => {
+                    console.log('重新登录成功')
+                    isRelogin.show = false
+                    done()
+                  })
+                  .catch((err) => {
+                    if (err && err.message === 'exists') {
+                      isRelogin.show = false
+                      done()
+                      setTimeout(() => {
+                        MessageBox.confirm(
+                          i18n.t('system.crowdOut'),
+                          i18n.t('system.tip'),
+                          {
+                            confirmButtonText: i18n.t('form.confirm'),
+                            cancelButtonText: i18n.t('form.cancel'),
+                            type: 'warning',
+                            showClose: false,
+                            closeOnPressEscape: false,
+                            closeOnClickModal: false
+                          }
+                        )
+                          .then(() => {
+                            store
+                              .dispatch('Login', {
+                                username: store.getters.name,
+                                password: password,
+                                force: true
+                              })
+                              .then(() => {
+                                console.log('重新登录成功')
+                              })
+                              .catch((err) => {
+                                console.log(
+                                  '重新登录失败' + JSON.stringify(err)
+                                )
+                                return false
+                              })
+                          })
+                          .catch(() => {
+                            // if (this.captchaEnabled) {
+                            //   this.getCode()
+                            // }
+                            location.href = '/user/work'
+                          })
+                      }, 0)
+                    } else {
+                      // if (this.captchaEnabled) {
+                      //   this.getCode()
+                      // }
+                      return false
+                    }
+                  })
+              } else {
+                done()
+                isRelogin.show = false
+                location.href = '/user/work'
+              }
+            }
           }
         )
-          .then(() => {
+          .then(({ value }) => {
             isRelogin.show = false
-            store.dispatch('LogOut').then(() => {
-              location.href = '/user/work'
-            })
           })
           .catch(() => {
             isRelogin.show = false
+            location.href = '/user/work'
           })
       }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
@@ -158,6 +252,35 @@ service.interceptors.response.use(
   }
 )
 
+export function login(username, password, force) {
+  store
+    .dispatch('Login', { username: username, password: password, force: force })
+    .then(() => {
+      console.log('重新登录成功')
+    })
+    .catch((err) => {
+      if (err && err.message === 'exists') {
+        MessageBox.confirm(i18n.t('system.crowdOut'), i18n.t('system.tip'), {
+          confirmButtonText: i18n.t('form.confirm'),
+          cancelButtonText: i18n.t('form.cancel'),
+          type: 'warning'
+        })
+          .then(() => {
+            login(username, password, true)
+          })
+          .catch(() => {
+            // if (this.captchaEnabled) {
+            //   this.getCode()
+            // }
+          })
+      } else {
+        // if (this.captchaEnabled) {
+        //   this.getCode()
+        // }
+      }
+    })
+}
+
 // 通用下载方法
 export function download(url, params, filename, config) {
   downloadLoadingInstance = Loading.service({