fix: 短信验证码发送错误校验

app.vue

@@ -8,7 +8,7 @@ const loginState = useLoginState()
 
 onMounted(() => {
   loginState.checkSession().then(res => {
-    if (!res) {
+    if (!res && loginState.token) {
       toast.add({
         title: '登录失效',
         description: '登录已过期，请重新登录',

components/ModalAuthentication.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {Label, PinInputInput, PinInputRoot} from 'radix-vue'
-import {useFetchWrapped} from "~/composables/useFetchWrapped";
+import {useFetchWrapped} from '~/composables/useFetchWrapped';
 
 const toast = useToast()
 const modal = useModal()
@@ -16,13 +16,13 @@ const items = [
     key: 'sms',
     label: '短信登录',
     icon: 'i-tabler-message-2',
-    description: '使用短信验证码登录，未注册的账号将自动注册'
+    description: '使用短信验证码登录，未注册的账号将自动注册',
   },
   {
     key: 'account',
     label: '密码登录',
     icon: 'i-tabler-key',
-    description: '使用已有账号和密码登录'
+    description: '使用已有账号和密码登录',
   },
 ]
 
@@ -34,7 +34,7 @@ function onSubmit(form: req.user.Login) {
   final_loading.value = true
   useFetchWrapped<req.user.Login, BaseResponse<resp.user.Login>>('App.User_User.Login', {
     username: form.username,
-    password: form.password
+    password: form.password,
   }).then(res => {
     final_loading.value = false
     if (res.ret !== 200) {
@@ -42,7 +42,7 @@ function onSubmit(form: req.user.Login) {
         title: '登录失败',
         description: res.msg || '未知错误',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
       return
     }
@@ -51,7 +51,7 @@ function onSubmit(form: req.user.Login) {
         title: '登录失败',
         description: res.msg || '账号或密码错误',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
       return
     }
@@ -60,7 +60,7 @@ function onSubmit(form: req.user.Login) {
         title: '登录失败',
         description: res.msg || '无法获取登录状态',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
       return
     }
@@ -73,14 +73,14 @@ function onSubmit(form: req.user.Login) {
         title: '登录成功',
         description: `${loginState.user.username}, 欢迎回来`,
         color: 'primary',
-        icon: 'i-tabler-login-2'
+        icon: 'i-tabler-login-2',
       })
     }).catch(err => {
       toast.add({
         title: '登录失败',
         description: err.msg || '网络错误',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
     }).finally(() => {
       final_loading.value = false
@@ -90,7 +90,7 @@ function onSubmit(form: req.user.Login) {
       title: '登录失败',
       description: err.msg || '网络错误',
       color: 'red',
-      icon: 'i-tabler-circle-x'
+      icon: 'i-tabler-circle-x',
     })
   })
 }
@@ -100,8 +100,18 @@ const obtainSmsCode = () => {
   sms_sending.value = true
 
   useFetchWrapped<req.user.SmsLogin, BaseResponse<resp.user.SmsLogin>>('App.User_User.MobileLogin', {
-    mobile: smsForm.mobile
+    mobile: smsForm.mobile,
   }).then(res => {
+    if (res.ret !== 200) {
+      sms_sending.value = false
+      toast.add({
+        title: '验证码发送失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+      return
+    }
     sms_triggered.value = true
     sms_sending.value = false
     sms_counting_down.value = 60 // TODO: save timestamp to localstorage
@@ -117,7 +127,7 @@ const obtainSmsCode = () => {
       title: '验证码发送失败',
       description: err.msg || '网络错误',
       color: 'red',
-      icon: 'i-tabler-circle-x'
+      icon: 'i-tabler-circle-x',
     })
   })
 }
@@ -126,7 +136,7 @@ const handle_sms_verify = (e: string[]) => {
   final_loading.value = true
   useFetchWrapped<req.user.SmsLoginVerify, BaseResponse<resp.user.SmsLoginVerify>>('App.User_User.MobileLoginVerify', {
     mobile: smsForm.mobile,
-    sms_code: e.join('')
+    sms_code: e.join(''),
   }).then(res => {
     if (res.ret !== 200) {
       smsForm.sms_code = []
@@ -134,7 +144,7 @@ const handle_sms_verify = (e: string[]) => {
         title: '登录失败',
         description: res.msg || '未知错误',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
       return
     }
@@ -144,7 +154,7 @@ const handle_sms_verify = (e: string[]) => {
         title: '登录失败',
         description: res.msg || '无法获取登录状态',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
       return
     }
@@ -157,14 +167,14 @@ const handle_sms_verify = (e: string[]) => {
         title: '登录成功',
         description: `${loginState.user.username}, 欢迎回来`,
         color: 'primary',
-        icon: 'i-tabler-login-2'
+        icon: 'i-tabler-login-2',
       })
     }).catch(err => {
       toast.add({
         title: '登录失败',
         description: err.msg || '网络错误',
         color: 'red',
-        icon: 'i-tabler-circle-x'
+        icon: 'i-tabler-circle-x',
       })
     }).finally(() => {
       final_loading.value = false
@@ -232,20 +242,20 @@ const handle_sms_verify = (e: string[]) => {
                 <div v-if="sms_triggered">
                   <Label for="pin-input" class="pin-label">验证码</Label>
                   <PinInputRoot
-                      id="sms-input"
+                    id="sms-input"
-                      v-model="smsForm.sms_code"
+                    v-model="smsForm.sms_code"
-                      :disabled="sms_sending || final_loading"
+                    :disabled="sms_sending || final_loading"
-                      placeholder="○"
+                    placeholder="○"
-                      class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
+                    class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
-                      @complete="handle_sms_verify"
+                    @complete="handle_sms_verify"
-                      type="number" otp required
+                    type="number" otp required
                   >
                     <PinInputInput
-                        v-for="(id, index) in 4"
+                      v-for="(id, index) in 4"
-                        :key="id"
+                      :key="id"
-                        :index="index"
+                      :index="index"
-                        class="pin-input"
+                      class="pin-input"
-                        :autofocus="index === 0"
+                      :autofocus="index === 0"
                     />
                   </PinInputRoot>
                 </div>