refactor: login page

src/views/login/index.vue

@@ -12,70 +12,68 @@ interface ILoginForm {
   password: string
   /** 验证码 */
   code: string
-  /** 随机数 */
-  codeToken: string
 }
 
 const router = useRouter()
-
-const loading = ref<boolean>(false)
 const loginFormDom = ref<any>()
-const codeUrl = ref<string>("")
+
-const loginForm = reactive<ILoginForm>({
+const state = reactive({
+  /** 登录按钮 loading */
+  loading: false,
+  /** 验证码图片 URL */
+  codeUrl: "",
+  /** 登录表单 */
+  loginForm: {
     username: "admin",
-  password: "123456",
+    password: "12345678",
-  code: "1234",
+    code: "abcd"
-  codeToken: ""
+  } as ILoginForm,
-})
+  /** 登录表单校验规则 */
-const loginRules = reactive({
+  loginRules: {
     username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
     password: [
       { required: true, message: "请输入密码", trigger: "blur" },
-    { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
+      { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
     ],
     code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
-})
+  },
-const handleLogin = () => {
+  /** 登录逻辑 */
+  handleLogin: () => {
     loginFormDom.value.validate((valid: boolean) => {
       if (valid) {
-      loading.value = true
+        state.loading = true
         useUserStore()
           .login({
-          username: loginForm.username,
+            username: state.loginForm.username,
-          password: loginForm.password
+            password: state.loginForm.password
           })
           .then(() => {
-          loading.value = false
+            state.loading = false
             router.push({ path: "/" }).catch((err) => {
               console.warn(err)
             })
           })
           .catch(() => {
-          loading.value = false
+            state.loading = false
-          // createCode()
+            state.createCode()
+            state.loginForm.password = ""
           })
       } else {
         return false
       }
     })
-}
+  },
-/** 创建验证码 */
+  /** 创建验证码 */
-const createCode: () => void = () => {
+  createCode: () => {
     // 先清空验证码的输入
-  loginForm.code = ""
+    state.loginForm.code = ""
-  let codeToken = ""
-  const codeTokenLength = 12
-  // 随机数
-  for (let i = 0; i < codeTokenLength; i++) {
-    const index = Math.floor(Math.random() * 36)
-    codeToken += index
-  }
-  loginForm.codeToken = codeToken
     // 实际开发中，可替换成自己的地址，这里只是提供一个参考
-  codeUrl.value = `/api/v1/login/authcode?token=${codeToken}`
+    state.codeUrl = `/api/v1/login/code?${Math.random() * 1000}`
-}
+  }
-// 需要验证码的时候，需打开下方注释
+})
-// createCode()
+
+/** 初始化验证码 */
+// state.createCode()
 </script>
 
 <template>
@@ -86,10 +84,10 @@ const createCode: () => void = () => {
         <img src="@/assets/layout/logo-text-2.png" />
       </div>
       <div class="content">
-        <el-form ref="loginFormDom" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin">
+        <el-form ref="loginFormDom" :model="state.loginForm" :rules="state.loginRules" @keyup.enter="state.handleLogin">
           <el-form-item prop="username">
             <el-input
-              v-model="loginForm.username"
+              v-model="state.loginForm.username"
               placeholder="用户名"
               type="text"
               tabindex="1"
@@ -99,17 +97,18 @@ const createCode: () => void = () => {
           </el-form-item>
           <el-form-item prop="password">
             <el-input
-              v-model="loginForm.password"
+              v-model="state.loginForm.password"
               placeholder="密码"
               type="password"
               tabindex="2"
               :prefix-icon="Lock"
               size="large"
+              show-password
             />
           </el-form-item>
           <el-form-item prop="code">
             <el-input
-              v-model="loginForm.code"
+              v-model="state.loginForm.code"
               placeholder="验证码"
               type="text"
               tabindex="3"
@@ -118,10 +117,12 @@ const createCode: () => void = () => {
               size="large"
             />
             <span class="show-code">
-              <img :src="codeUrl" @click="createCode" />
+              <img :src="state.codeUrl" @click="state.createCode" />
             </span>
           </el-form-item>
-          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button>
+          <el-button :loading="state.loading" type="primary" size="large" @click.prevent="state.handleLogin">
+            登 录
+          </el-button>
         </el-form>
       </div>
     </div>