complete login logic

src/store/modules/kungalgamer.ts

@@ -24,6 +24,7 @@ export const useKUNGalgamerStore = defineStore({
     },
     login(loginData: LoginData): Promise<LoginResponseData> {
       return new Promise((resolve, reject) => {
+        // 这里是向后端发请求的函数
         postLoginDataApi({
           username: loginData.username,
           password: loginData.password,
@@ -32,7 +33,7 @@ export const useKUNGalgamerStore = defineStore({
             if (res.token) {
               this.setToken(res.token)
             } else {
-              throw new Error('可能是服务器的错误')
+              throw new Error('500 Server ERROR')
             }
             resolve(res)
           })

src/utils/validate.ts

@@ -6,7 +6,7 @@ export const isValidURL = (url: string) => {
 }
 
 // 正则表达式匹配合法邮箱
-export const validateEmail = (email: string) => {
+export const isValidEmail = (email: string) => {
   const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   return regex.test(email)
 }

src/views/login/components/Login.vue

@@ -8,10 +8,13 @@ import { useKUNGalgameMessageStore } from '@/store/modules/message'
 // 导入人机验证组件
 import Capture from '@/components/capture/Capture.vue'
 
-// 定义标志位
-const isFirstLoad = ref(false)
+// 导入验证表单是否合法的函数
+import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
+
 // 定义人机验证的标志
 const isShowValidate = ref(false)
+// 定义人机验证是否完成的标志
+const isCaptureComplete = ref(false)
 
 const router = useRouter()
 
@@ -19,35 +22,80 @@ const info = useKUNGalgameMessageStore()
 
 const useStore = useKUNGalgamerStore()
 
+// 用户登录的表单
 const loginForm = reactive({
   username: '',
   password: '',
 })
 
-const handleLogin = () => {
-  useStore.login(loginForm).then((res) => {
-    if (res.success) {
-      router.push('/')
-      info.info('AlertInfo.login')
-    }
-  })
-}
-
-const handleVerify = async (result: boolean) => {
-  // 跳过首次加载页面
-  if (isFirstLoad.value) {
-    if (result) {
-      // 处理人机校验完成后的逻辑
-      isShowValidate.value = false
-      info.info('AlertInfo.capture')
-    }
-  } else {
-    isFirstLoad.value = true
+const handleVerify = (result: boolean) => {
+  if (result) {
+    // 处理人机校验完成后的逻辑
+    isShowValidate.value = false
+    info.info('CaptureInfo.capture')
+    isCaptureComplete.value = true
   }
 }
 
-const capture = () => {
-  isShowValidate.value = true
+const isEmptyInput = () => {
+  // 如果输入的字段为空
+  if (!loginForm.username.trim()) {
+    // 提示用户输入的名字为空
+    info.info('用户名不可为空')
+    return false
+  } else if (!loginForm.password.trim()) {
+    // 提示用户输入的密码为空
+    info.info('密码不可为空')
+    return false
+  } else {
+    return true
+  }
+}
+
+// 判断输入的用户名和密码字段是否合法
+const isValidInput = (): boolean => {
+  // 如果输入为空直接返回 false
+  if (!isEmptyInput()) {
+    return false
+  }
+  if (isValidEmail(loginForm.username) || isValidName(loginForm.username)) {
+    // 输入的用户名正确时（为用户名或邮箱）
+    if (isValidPassword(loginForm.password)) {
+      return true
+    } else {
+      // 如果密码非法的话返回非法密码
+      info.info(
+        `非法的密码格式，密码的长度为 6 到 17 位，必须包含至少一个英文字符和一个数字，可以选择性的包含 \\w!@#$%^&*()-+= 等特殊字符`
+      )
+      return false
+    }
+  } else {
+    // 输入的用户名或邮箱错误时的逻辑
+    info.info(
+      `非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线 `
+    )
+    return false
+  }
+}
+
+// 处理用户点击登陆时的逻辑
+const handleLogin = () => {
+  // 保证输入格式和人机验证通过才能发送登录请求
+  if (isValidInput()) {
+    // 未完成人机身份验证提示信息，直接返回
+    if (!isCaptureComplete.value) {
+      info.info('请点击上方完成人机身份验证')
+      return
+    }
+    // 所有的验证都通过了再向后端发送请求
+    useStore.login(loginForm).then((res) => {
+      // 如果请求成功跳转到主页
+      if (res.success) {
+        router.push('/')
+        info.info('AlertInfo.login')
+      }
+    })
+  }
 }
 </script>
 
@@ -59,7 +107,7 @@ const capture = () => {
       <h2 class="title">登陆</h2>
       <input
         v-model="loginForm.username"
-        type="email"
+        type="text"
         placeholder="用户名或邮箱"
         class="input"
       />
@@ -70,7 +118,9 @@ const capture = () => {
         class="input"
       />
       <span class="forget">忘记密码? 点击发送重置邮件</span>
-      <span @click="capture" class="capture">点击进行人机身份验证</span>
+      <span @click="isShowValidate = true" class="capture"
+        >点击进行人机身份验证</span
+      >
       <button class="btn" type="submit">登陆</button>
     </form>
   </div>