vue 工作记录登录后的一些好方法

//记住要跳转的地址

function handleLogin() {

  loginFormRef.value.validate((valid: boolean) => {

    if (valid) {

      loading.value = true;

      userStore

        .login(loginData.value)

        .then(() => {

          const query: LocationQuery = route.query;

          const redirect = (query.redirect as LocationQueryValue) ?? "/";

          const otherQueryParams = Object.keys(query).reduce(

            (acc: any, cur: string) => {

              if (cur !== "redirect") {

                acc[cur] = query[cur];

              }

              return acc;

            },

            {}

          );

          router.push({ path: redirect, query: otherQueryParams });

        })

        .catch(() => {

          // 验证失败，重新生成验证码

          getCaptcha();

        })

        .finally(() => {

          loading.value = false;

        });

    }

  });

}

/**

 * 获取验证码

 */

function getCaptcha() {

  getCaptchaApi().then(({ data }) => {

    loginData.value.captchaKey = data.captchaKey;

    captchaBase64.value = data.captchaBase64;

  });

}

   

      class="z-1 !border-none w-100 !bg-transparent !rounded-4%

    >

     

       

{{ title }}

        {{ version }}

     

     

        ref="loginFormRef"

        :model="loginData"

        :rules="loginRules"

        class="login-form"

      >

       

         

           

         

         

            ref="username"

            v-model="loginData.username"

            class="flex-1"

            size="large"

            :placeholder="$t('login.username')"

            name="username"

          />

       

       

          :disabled="isCapslock === false"

          content="Caps lock is On"

          placement="right"

        >

         

           

             

           

           

              v-model="loginData.password"

              class="flex-1"

              :placeholder="$t('login.password')"

              :type="passwordVisible === false ? 'password' : 'input'"

              size="large"

              name="password"

              @keyup="checkCapslock"

              @keyup.enter="handleLogin"

            />

           

             

                :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"

                class="cursor-pointer"

              />

           

         

       

       

       

         

           

         

         

            v-model="loginData.captchaCode"

            auto-complete="off"

            :placeholder="$t('login.captchaCode')"

            class="w-[60%]"

            @keyup.enter="handleLogin"

          />

         

           

              :src="captchaBase64"

              @click="getCaptcha"

              class="w-[120px] h-[48px] cursor-pointer"

            >

             

           

         

       

       

          :loading="loading"

          type="primary"

          class="w-full"

          @click.prevent="handleLogin"

          >{{ $t("login.login") }}

       

       

       

          {{ $t("login.username") }}: admin

          {{ $t("login.password") }}: 123456