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;

  });

}

<!-- 登录表单 -->

    <el-card

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

    >

      <div class="text-center relative">

        <h2>{{ title }}</h2>

        <el-tag class="ml-2 absolute top-0 right-0">{{ version }}</el-tag>

      </div>

      <el-form

        ref="loginFormRef"

        :model="loginData"

        :rules="loginRules"

        class="login-form"

      >

        <el-form-item prop="username">

          <div class="p-2">

            <svg-icon icon-class="user" />

          </div>

          <el-input

            ref="username"

            v-model="loginData.username"

            class="flex-1"

            size="large"

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

            name="username"

          />

        </el-form-item>

        <el-tooltip

          :disabled="isCapslock === false"

          content="Caps lock is On"

          placement="right"

        >

          <el-form-item prop="password">

            <span class="p-2">

              <svg-icon icon-class="password" />

            </span>

            <el-input

              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"

            />

            <span class="mr-2" @click="passwordVisible = !passwordVisible">

              <svg-icon

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

                class="cursor-pointer"

              />

            </span>

          </el-form-item>

        </el-tooltip>

        <!-- 验证码 -->

        <el-form-item prop="captchaCode">

          <span class="p-2">

            <svg-icon icon-class="captcha" />

          </span>

          <el-input

            v-model="loginData.captchaCode"

            auto-complete="off"

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

            class="w-[60%]"

            @keyup.enter="handleLogin"

          />

          <div class="captcha">

            <el-image

              :src="captchaBase64"

              @click="getCaptcha"

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

            >

              <template #error>

                <div class="image-slot">

                  <i-ep-picture />

                </div>

              </template>

            </el-image>

          </div>

        </el-form-item>

        <el-button

          :loading="loading"

          type="primary"

          class="w-full"

          @click.prevent="handleLogin"

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

        </el-button>

        <!-- 账号密码提示 -->

        <div class="mt-10 text-sm">

          <span>{{ $t("login.username") }}: admin</span>

          <span class="ml-4"> {{ $t("login.password") }}: 123456</span>

        </div>

      </el-form>

    </el-card>