feat: 登录验证

src/views/login/index.vue

 <template>
+    <a-spin :loading="loading" tip="登陆中..." class="w-full h-full">
         <div class="w-full h-full flex justify-center items-center bg-primary">
             <div class="w-[400px] py-4 px-8 bg-white shadow-xl rounded-3xl" @keyup.enter="handleLogin">
                 <div class="flex justify-center my-8"><a-image :src="logo" :preview="false" fit="fill" /></div>
@@ -29,6 +30,14 @@
                 </div>
             </div>
         </div>
+    </a-spin>
+    <global-model v-model:visible="showConfirmModel" title="提示" :width="320">
+        当前账号已在线，是否确认登录？
+        <template #footer>
+            <a-button size="large" type="primary" @click="tryLogin">确定</a-button>
+            <a-button size="large" @click="showConfirmModel = false">取消</a-button>
+        </template>
+    </global-model>
 </template>
 
 <script setup lang="ts">
@@ -36,9 +45,9 @@ import logo from '@/assets/images/header/logo.png'
 import useUserStore from '@/store/user'
 import { Notification, ValidatedError } from '@arco-design/web-vue'
 import { alova } from '@/api/alova-instance'
-import { useRequest } from 'alova'
 import { debounce } from 'lodash'
 import QrcodeVue from 'qrcode.vue'
+import { useRequest } from 'alova'
 
 const loginForm = reactive({
     username: '',
@@ -86,36 +95,45 @@ const handleBack = () => {
     scanCode.value = ''
 }
 //登录
+const showConfirmModel = ref(false)
 const loginFormRef = ref()
 const userStore = useUserStore()
-const {
-    loading,
-    send: sendLogin,
-    onSuccess: loginSuccess
-} = useRequest(
-    () =>
-        alova.Post<any>('/admin/login', loginForm, {
-            // @ts-ignore
-            meta: {
-                loading: '登陆中...'
-            }
-        }),
-    {
-        immediate: false
-    }
-)
+const loading = ref(false)
+const { send: sendGetCallState, onSuccess: getUserCallStateSuccess } = useRequest(() => alova.Post<any>('/call/getUserCallState', { username: loginForm.username }), { immediate: false })
+const { send: sendLogin, onSuccess: loginSuccess } = useRequest(() => alova.Post<any>('/admin/login', loginForm), { immediate: false })
 const handleLogin = async () => {
     loginFormRef.value?.validate(async (errors: Record<string, ValidatedError>) => {
         if (!errors && !loading.value) {
-            sendLogin()
+            loading.value = true
+            sendGetCallState()
         }
     })
 }
 //是否扫码登录
 const showScanCode = ref(false)
 const scanCode = ref('')
+//验证登录状态
+getUserCallStateSuccess(({ data: res }) => {
+    if (res.code == 200) {
+        const data = res.data
+        if (data.callState !== 'idle') {
+            loading.value = false
+            Notification.info({
+                content: '当前用户处于通话状态, 请稍后再试'
+            })
+            return
+        }
+        if (data.isSignin === '1') {
+            loading.value = false
+            showConfirmModel.value = true
+            return
+        }
+        return sendLogin()
+    }
+})
 //登录成功
 loginSuccess(({ data: res }) => {
+    loading.value = false
     if (res.code == 200) {
         //扫码登录
         if (loginMethodType.value == 'scan') {
@@ -134,6 +152,11 @@ loginSuccess(({ data: res }) => {
         })
     }
 })
+const tryLogin = () => {
+    showConfirmModel.value = false
+    loading.value = true
+    sendLogin()
+}
 //获取验证码
 const loginCode = ref('')
 const getCaptcha = async () => {