暂去掉验证码登录
This commit is contained in:
weiwei committed
1 parent
4cb85e2dea
commit
a9f2d0a67f
1 file changed
+58
-51
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<el-form size="large" class="login-content-form" ref="loginFormRef" :rules="loginRules" :model="state.ruleForm" @keyup.enter="handleVerify">
|
||||
<el-form
|
||||
size="large"
|
||||
class="login-content-form"
|
||||
ref="loginFormRef"
|
||||
:rules="loginRules"
|
||||
:model="state.ruleForm"
|
||||
@keyup.enter="handleVerify"
|
||||
>
|
||||
<el-form-item class="login-animation1" prop="username">
|
||||
<el-input
|
||||
text
|
||||
@@ -56,22 +63,22 @@
|
||||
</el-form-item>
|
||||
<el-form-item class="mt-4 login-animation4">
|
||||
<el-button type="primary" class="rounded-lg login-content-submit" v-waves @click="handleVerify" :loading="loading">
|
||||
<span class="font-semibold tracking-wide">{{ $t('password.accountBtnText') }}</span>
|
||||
<span class="font-semibold tracking-wide">{{ $t("password.accountBtnText") }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div class="relative flex items-center justify-between">
|
||||
<div class="ml-auto text-sm">
|
||||
<a href="#" class="text-blue-500" @click="emit('change', LoginTypeEnum.MOBILE)">
|
||||
{{ $t('password.mobileLogin') }}
|
||||
</a>
|
||||
<!-- <a href="#" class="text-blue-500" @click="emit('change', LoginTypeEnum.MOBILE)">
|
||||
{{ $t("password.mobileLogin") }}
|
||||
</a> -->
|
||||
<a href="#" v-if="autoRegisterEnable" class="ml-2 text-blue-500" @click="emit('change', LoginTypeEnum.REGISTER)">
|
||||
{{ $t('password.createAccount') }}
|
||||
{{ $t("password.createAccount") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font12 mt30 login-animation4 login-msg text-slate-400">{{ $t('browserMsgText') }}</div>
|
||||
<div class="font12 mt30 login-animation4 login-msg text-slate-400">{{ $t("browserMsgText") }}</div>
|
||||
</el-form>
|
||||
<Verify
|
||||
@success="verifySuccess"
|
||||
@@ -84,92 +91,92 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="password">
|
||||
import { defineAsyncComponent, reactive, ref } from 'vue';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { generateUUID } from '/@/utils/other';
|
||||
import { LoginErrorEnum, LoginTypeEnum } from '/@/api/login';
|
||||
import { defineAsyncComponent, reactive, ref } from "vue"
|
||||
import { useUserInfo } from "/@/stores/userInfo"
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { generateUUID } from "/@/utils/other"
|
||||
import { LoginErrorEnum, LoginTypeEnum } from "/@/api/login"
|
||||
|
||||
// 使用国际化插件
|
||||
const { t } = useI18n();
|
||||
const { t } = useI18n()
|
||||
|
||||
// 动态加载滑块验证码组件
|
||||
const Verify = defineAsyncComponent(() => import('/@/components/Verifition/Verify.vue'));
|
||||
const Verify = defineAsyncComponent(() => import("/@/components/Verifition/Verify.vue"))
|
||||
|
||||
// 定义变量内容
|
||||
const autoRegisterEnable = ref(import.meta.env.VITE_REGISTER_ENABLE === 'true');
|
||||
const emit = defineEmits(['signInSuccess', 'change']); // 声明事件名称
|
||||
const loginFormRef = ref(); // 定义LoginForm表单引用
|
||||
const loading = ref(false); // 定义是否正在登录中
|
||||
const autoRegisterEnable = ref(import.meta.env.VITE_REGISTER_ENABLE === "true")
|
||||
const emit = defineEmits(["signInSuccess", "change"]) // 声明事件名称
|
||||
const loginFormRef = ref() // 定义LoginForm表单引用
|
||||
const loading = ref(false) // 定义是否正在登录中
|
||||
const state = reactive({
|
||||
isShowPassword: false, // 是否显示密码
|
||||
ruleForm: {
|
||||
// 表单数据
|
||||
username: '', // 用户名
|
||||
password: '', // 密码
|
||||
code: '', // 验证码
|
||||
randomStr: 'blockPuzzle', // 验证码随机数
|
||||
username: "", // 用户名
|
||||
password: "", // 密码
|
||||
code: "", // 验证码
|
||||
randomStr: "blockPuzzle", // 验证码随机数
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const loginRules = reactive({
|
||||
username: [{ required: true, trigger: 'blur', message: t('password.accountPlaceholder1') }], // 用户名校验规则
|
||||
password: [{ required: true, trigger: 'blur', message: t('password.accountPlaceholder2') }], // 密码校验规则
|
||||
code: [{ required: true, trigger: 'blur', message: t('verify.imageCode') }],
|
||||
});
|
||||
username: [{ required: true, trigger: "blur", message: t("password.accountPlaceholder1") }], // 用户名校验规则
|
||||
password: [{ required: true, trigger: "blur", message: t("password.accountPlaceholder2") }], // 密码校验规则
|
||||
code: [{ required: true, trigger: "blur", message: t("verify.imageCode") }],
|
||||
})
|
||||
|
||||
const verifyref = ref<InstanceType<typeof Verify>>(null); // 定义verify组件引用
|
||||
const verifyref = ref<InstanceType<typeof Verify>>(null) // 定义verify组件引用
|
||||
// 是否开启验证码
|
||||
const verifyEnable = ref(import.meta.env.VITE_VERIFY_ENABLE === 'true');
|
||||
const verifyImageEnable = ref(import.meta.env.VITE_VERIFY_IMAGE_ENABLE === 'true');
|
||||
const imgSrc = ref('');
|
||||
const verifyEnable = ref(import.meta.env.VITE_VERIFY_ENABLE === "true")
|
||||
const verifyImageEnable = ref(import.meta.env.VITE_VERIFY_IMAGE_ENABLE === "true")
|
||||
const imgSrc = ref("")
|
||||
|
||||
// 调用图形证码进行校验
|
||||
const getVerifyImageCode = () => {
|
||||
state.ruleForm.randomStr = generateUUID();
|
||||
imgSrc.value = `${import.meta.env.VITE_API_URL}${import.meta.env.VITE_IS_MICRO == 'false' ? '/admin' : '/auth'}/code/image?randomStr=${
|
||||
state.ruleForm.randomStr = generateUUID()
|
||||
imgSrc.value = `${import.meta.env.VITE_API_URL}${import.meta.env.VITE_IS_MICRO == "false" ? "/admin" : "/auth"}/code/image?randomStr=${
|
||||
state.ruleForm.randomStr
|
||||
}`;
|
||||
};
|
||||
}`
|
||||
}
|
||||
|
||||
// 调用滑块验证码进行校验
|
||||
const handleVerify = async () => {
|
||||
const valid = await loginFormRef.value.validate().catch(() => {}); // 表单校验
|
||||
const valid = await loginFormRef.value.validate().catch(() => {}) // 表单校验
|
||||
|
||||
if (valid && verifyEnable.value) {
|
||||
verifyref.value.show(); // 显示验证组件
|
||||
verifyref.value.show() // 显示验证组件
|
||||
} else if (valid) {
|
||||
onSignIn(); // 调用登录方法
|
||||
onSignIn() // 调用登录方法
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 滑块验证码校验成功调用后台登录接口
|
||||
const verifySuccess = (params: any) => {
|
||||
state.ruleForm.code = params.captchaVerification; // 获取验证码
|
||||
onSignIn(); // 调用登录方法
|
||||
};
|
||||
state.ruleForm.code = params.captchaVerification // 获取验证码
|
||||
onSignIn() // 调用登录方法
|
||||
}
|
||||
|
||||
// 账号密码登录
|
||||
const onSignIn = async () => {
|
||||
loading.value = true; // 正在登录中
|
||||
loading.value = true // 正在登录中
|
||||
try {
|
||||
await useUserInfo().login(state.ruleForm); // 调用登录方法
|
||||
emit('signInSuccess'); // 触发事件
|
||||
await useUserInfo().login(state.ruleForm) // 调用登录方法
|
||||
emit("signInSuccess") // 触发事件
|
||||
} catch (err: any) {
|
||||
if (err?.data === LoginErrorEnum.CREDENTIALS_EXPIRED) {
|
||||
emit('change', LoginTypeEnum.EXPIRE, state.ruleForm.username); // 触发修改密码
|
||||
emit("change", LoginTypeEnum.EXPIRE, state.ruleForm.username) // 触发修改密码
|
||||
}
|
||||
} finally {
|
||||
loading.value = false; // 登录结束
|
||||
loading.value = false // 登录结束
|
||||
if (verifyImageEnable.value) {
|
||||
getVerifyImageCode();
|
||||
getVerifyImageCode()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (verifyImageEnable.value) {
|
||||
getVerifyImageCode();
|
||||
getVerifyImageCode()
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
Reference in new issue
Block a user