yunzerwebsite/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加极验模块

Browse Source
This commit is contained in:
hero920103
2026-02-26 17:38:03 +08:00
parent 6686cee4d9
commit ef5eb809bc
7 changed files with 1203 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/index.vue
+303 -128
View File
@@ -10,23 +10,8 @@
<svg viewBox="0 0 300 160" style="max-width: 100%" fill="none">
<ellipse cx="150" cy="140" rx="120" ry="16" fill="#edf4fd" />
<rect x="57" y="58" width="60" height="40" rx="12" fill="#64b6f7" />
<rect
x="125"
y="46"
width="110"
height="64"
rx="14"
fill="#389bf7"
opacity="0.11"
/>
<rect
x="136"
y="60"
width="60"
height="41"
rx="10"
fill="#b8e1ff"
/>
<rect x="125" y="46" width="110" height="64" rx="14" fill="#389bf7" opacity="0.11" />
<rect x="136" y="60" width="60" height="41" rx="10" fill="#b8e1ff" />
</svg>
</div>
<!-- 版权信息 -->
@@ -37,59 +22,37 @@
<div class="login-desc">请填写您的账号信息</div>
<div class="form-group icon-input-group">
<span class="input-icon">
<!-- 用户图标 -->
<i class="fa-solid fa-building-columns"></i>
</span>
<input
v-model="tenant_name"
type="text"
placeholder="租户名称"
autocomplete="tenant_name"
class="input input-with-icon"
/>
<input v-model="tenant_name" type="text" placeholder="租户名称" autocomplete="tenant_name"
class="input input-with-icon" />
</div>
<div class="form-group icon-input-group">
<span class="input-icon">
<!-- 用户图标 -->
<i class="fa-solid fa-user"></i>
</span>
<input
v-model="account"
type="text"
placeholder="用户名"
autocomplete="account"
class="input input-with-icon"
/>
<input v-model="account" type="text" placeholder="用户名" autocomplete="account" class="input input-with-icon" />
</div>
<div class="form-group icon-input-group">
<span class="input-icon">
<!-- 密码图标 -->
<i class="fa-solid fa-lock"></i>
</span>
<input
v-model="password"
:type="passwordVisible ? 'text' : 'password'"
placeholder="密码"
autocomplete="current-password"
class="input input-with-icon"
/>
<span
class="visible-btn"
@click="passwordVisible = !passwordVisible"
:title="passwordVisible ? '隐藏密码' : '显示密码'"
>
<input v-model="password" :type="passwordVisible ? 'text' : 'password'" placeholder="密码"
autocomplete="current-password" class="input input-with-icon" />
<span class="visible-btn" @click="passwordVisible = !passwordVisible"
:title="passwordVisible ? '隐藏密码' : '显示密码'">
<i v-if="passwordVisible" class="fa-regular fa-eye"></i>
<i v-else class="fa-solid fa-eye-slash"></i>
</span>
</div>
<!-- 极验验证码容器 -->
<div style="display: none;" v-if="showCaptchaContainer" class="geetest-container" ref="captchaContainer"></div>
<div class="remember-me-row">
<label class="remember-me-label">
<input
type="checkbox"
v-model="rememberMe"
class="remember-me-checkbox"
@change="handleRememberMeChange"
/>
<input type="checkbox" v-model="rememberMe" class="remember-me-checkbox" @change="handleRememberMeChange" />
<span>记住我</span>
</label>
<div class="action-links">
@@ -111,16 +74,19 @@
<div class="login-light light2"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { login } from "@/api/login";
import { ElMessageBox } from "element-plus";
import { login, getOpenVerify, getGeetest4Infos } from "@/api/login";
import "@/assets/js/gt4.js";
import { ElMessageBox, ElMessage } from "element-plus";
const router = useRouter();
const authStore = useAuthStore();
// --- 表单数据 ---
const tenant_name = ref("");
const account = ref("");
const password = ref("");
@@ -129,24 +95,230 @@ const rememberMe = ref(false);
const loading = ref(false);
const errorMsg = ref("");
onMounted(() => {
const savedUser = localStorage.getItem("loginAccount");
const savedTenant = localStorage.getItem("loginTenantName");
const savedPassword = localStorage.getItem("loginPassword");
const savedRemember = localStorage.getItem("loginRememberMe");
// --- 极验相关变量 ---
const showCaptchaContainer = ref(false);
const captchaContainer = ref<HTMLElement | null>(null);
const captchaInstance = ref<any>(null);
if (savedRemember === "true") {
tenant_name.value = savedTenant || "";
account.value = savedUser || "";
password.value = savedPassword || "";
rememberMe.value = true;
// --- 加载JS脚本 ---
const loadScript = (url: string): Promise<void> => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`加载脚本失败: ${url}`));
document.head.appendChild(script);
});
};
// --- 清理验证码实例 ---
const cleanCaptchaInstance = () => {
if (captchaInstance.value) {
try {
captchaInstance.value.destroy();
} catch (e) {
console.warn("销毁验证码实例失败:", e);
}
captchaInstance.value = null;
showCaptchaContainer.value = false;
}
});
};
// 记住我复选框变化时触发
// --- 执行登录请求 ---
const performLoginRequest = async () => {
const res = await login({
tenant_name: tenant_name.value,
account: account.value,
password: password.value
});
if (res && res.code === 200) {
// 登录成功：处理"记住我"
if (rememberMe.value) {
localStorage.setItem("loginAccount", account.value);
localStorage.setItem("loginTenantName", tenant_name.value);
localStorage.setItem("loginPassword", password.value);
localStorage.setItem("loginRememberMe", "true");
} else {
localStorage.removeItem("loginAccount");
localStorage.removeItem("loginTenantName");
localStorage.removeItem("loginPassword");
localStorage.setItem("loginRememberMe", "false");
}
authStore.setLoginInfo(res.data);
// 重置 Tabs 状态
const { useTabsStore } = await import("@/stores");
const tabsStore = useTabsStore();
tabsStore.resetTabs();
router.push({ path: "/home" });
ElMessage.success("登录成功！");
return true;
} else {
errorMsg.value = res.msg || "登录失败";
return false;
}
};
// --- 初始化极验4.0 ---
const startGeetest4 = async () => {
showCaptchaContainer.value = true;
await nextTick();
if (!captchaContainer.value) {
errorMsg.value = "验证码容器未找到";
loading.value = false;
// 验证码容器未找到，跳过验证直接登录
return await performLoginRequest();
}
// 获取极验4.0配置
const res4 = await getGeetest4Infos();
if (!res4 || res4.code !== 200 || !res4.data || !res4.data.captcha_id) {
errorMsg.value = "获取极验配置失败，跳过验证直接登录";
showCaptchaContainer.value = false;
// 配置获取失败，跳过验证直接登录
return await performLoginRequest();
}
const config = res4.data;
// @ts-ignore
if (!window.initGeetest4) {
errorMsg.value = "极验4.0 SDK 加载失败，跳过验证直接登录";
loading.value = false;
showCaptchaContainer.value = false;
return await performLoginRequest();
}
// @ts-ignore
window.initGeetest4({
captchaId: config.captcha_id,
product: 'bind',
language: 'zh-CN',
container: captchaContainer.value
}, (instance: any) => {
captchaInstance.value = instance;
// 验证成功回调
instance.onSuccess(async () => {
const result = instance.getValidate();
// 将验证结果添加到登录参数中
const loginRes = await login({
tenant_name: tenant_name.value,
account: account.value,
password: password.value,
captcha_id: result?.captcha_id || "",
lot_number: result?.lot_number || "",
pass_token: result?.pass_token || "",
gen_time: result?.gen_time || "",
captcha_output: result?.captcha_output || ""
});
if (loginRes && loginRes.code === 200) {
if (rememberMe.value) {
localStorage.setItem("loginAccount", account.value);
localStorage.setItem("loginTenantName", tenant_name.value);
localStorage.setItem("loginPassword", password.value);
localStorage.setItem("loginRememberMe", "true");
} else {
localStorage.removeItem("loginAccount");
localStorage.removeItem("loginTenantName");
localStorage.removeItem("loginPassword");
localStorage.setItem("loginRememberMe", "false");
}
authStore.setLoginInfo(loginRes.data);
const { useTabsStore } = await import("@/stores");
const tabsStore = useTabsStore();
tabsStore.resetTabs();
router.push({ path: "/home" });
ElMessage.success("登录成功！");
} else {
errorMsg.value = loginRes.msg || "登录失败";
}
loading.value = false;
cleanCaptchaInstance();
});
// 验证失败回调
instance.onFail(() => {
errorMsg.value = "验证码验证失败，请重试";
loading.value = false;
});
// 错误回调 - 网络错误时跳过验证直接登录
instance.onError((err: any) => {
errorMsg.value = "验证码加载失败，跳过验证直接登录";
loading.value = false;
cleanCaptchaInstance();
// 跳过验证直接登录
performLoginRequest();
});
// 显示验证码
instance.showCaptcha();
});
return true;
};
/**
* 登录请求
*/
const handleLogin = async () => {
// 清空错误提示
errorMsg.value = "";
// 表单验证
if (!tenant_name.value.trim()) {
errorMsg.value = "请输入租户名称";
return;
}
if (!account.value.trim()) {
errorMsg.value = "请输入用户名";
return;
}
if (!password.value.trim()) {
errorMsg.value = "请输入密码";
return;
}
if (loading.value) return;
loading.value = true;
try {
// 先判断是否开启验证
const verifyRes = await getOpenVerify();
let openVerify = "0";
if (verifyRes && verifyRes.code === 200 && Array.isArray(verifyRes.data)) {
verifyRes.data.forEach((item: any) => {
if (item.label === "openVerify") {
openVerify = item.value || "0";
}
});
}
// 如果开启了验证，使用极验4.0
if (openVerify === "1") {
await startGeetest4();
} else {
// 直接登录
await performLoginRequest();
}
} catch (err: any) {
errorMsg.value = err?.response?.data?.msg || err?.message || "登录失败，请重试";
} finally {
loading.value = false;
}
};
// 记住我逻辑优化
const handleRememberMeChange = async () => {
if (rememberMe.value) {
// 勾选时弹出确认提示
try {
await ElMessageBox.confirm(
'请确认电脑环境是可信的，登录成功后会自动记住密码。',
@@ -155,75 +327,31 @@ const handleRememberMeChange = async () => {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}
);
// 用户确认，等待登录成功后再保存
} catch {
// 用户取消，取消勾选
rememberMe.value = false;
}
} else {
// 取消勾选时清除缓存
localStorage.removeItem("loginAccount");
localStorage.removeItem("loginTenantName");
localStorage.removeItem("loginPassword");
}
};
const handleLogin = async () => {
errorMsg.value = "";
if (!tenant_name.value || !account.value || !password.value) {
errorMsg.value = "请输入租户名称、用户名和密码";
return;
// 页面加载处理
onMounted(() => {
// 从本地存储恢复表单
const savedRemember = localStorage.getItem("loginRememberMe");
if (savedRemember === "true") {
tenant_name.value = localStorage.getItem("loginTenantName") || "";
account.value = localStorage.getItem("loginAccount") || "";
password.value = localStorage.getItem("loginPassword") || "";
rememberMe.value = true;
}
});
// 记住我的处理已在复选框变化时完成
if (!rememberMe.value) {
localStorage.removeItem("loginAccount");
localStorage.removeItem("loginTenantName");
localStorage.removeItem("loginPassword");
localStorage.setItem("loginRememberMe", "false");
}
loading.value = true;
try {
const res = await login(account.value, password.value, tenant_name.value);
if (res && res.code === 200) {
// 登录成功时保存登录信息（如果勾选了记住我）
if (rememberMe.value) {
localStorage.setItem("loginAccount", account.value);
localStorage.setItem("loginTenantName", tenant_name.value);
localStorage.setItem("loginPassword", password.value);
localStorage.setItem("loginRememberMe", "true");
}
authStore.setLoginInfo(res.data);
// 登录成功后重置 tabs store 为初始状态
const { useTabsStore } = await import("@/stores");
const tabsStore = useTabsStore();
tabsStore.resetTabs();
router.push({ path: "/home" });
} else {
errorMsg.value = res.msg || "登录失败";
}
} catch (err) {
errorMsg.value =
err?.response?.data?.msg || err?.message || "登录失败，请重试";
} finally {
loading.value = false;
}
};
// 跳转注册、忘记密码页面
const goRegister = () => {
router.push({ path: "/register" });
};
const goForget = () => {
router.push({ path: "/forget" });
};
const goRegister = () => router.push("/register");
const goForget = () => router.push("/forget");
</script>
<style scoped>
.login-bg {
min-height: 100vh;
@@ -235,6 +363,7 @@ const goForget = () => {
position: relative;
overflow: hidden;
}
.login-card {
display: flex;
min-width: 770px;
@@ -246,6 +375,7 @@ const goForget = () => {
overflow: hidden;
z-index: 10;
}
.login-side {
width: 320px;
background: #52a8ff;
@@ -256,6 +386,7 @@ const goForget = () => {
box-shadow: 4px 0 32px 0 rgba(189, 231, 255, 0.13) inset;
position: relative;
}
.brand {
display: flex;
align-items: center;
@@ -263,18 +394,20 @@ const goForget = () => {
margin-bottom: 42px;
user-select: none;
}
.brand-title {
font-size: 25px;
letter-spacing: 2px;
font-weight: 700;
color: #fff;
/* text-shadow: 0 0 6px #d4ecfc; */
}
.illus {
margin-top: 30px;
user-select: none;
opacity: 0.95;
}
/* 版权信息样式 */
.copyright {
width: 100%;
@@ -287,6 +420,7 @@ const goForget = () => {
padding-top: 25px;
user-select: none;
}
.login-panel {
flex: 1;
padding: 52px 54px 48px 54px;
@@ -296,6 +430,7 @@ const goForget = () => {
background: transparent;
min-width: 320px;
}
.login-title {
margin: 0 0 8px 0;
font-size: 28px;
@@ -304,12 +439,14 @@ const goForget = () => {
text-align: left;
letter-spacing: 1px;
}
.login-desc {
color: #7391c4;
font-size: 15px;
margin-bottom: 28px;
letter-spacing: 0.2px;
}
.form-group {
margin-bottom: 15px;
position: relative;
@@ -321,9 +458,11 @@ const goForget = () => {
align-items: center;
position: relative;
}
.input-with-icon {
padding-left: 36px !important;
}
.input-icon {
position: absolute;
left: 10px;
@@ -351,9 +490,11 @@ const goForget = () => {
opacity: 0.82;
user-select: none;
}
.visible-btn:hover {
opacity: 1;
}
/* 防止密码输入框可见按钮和输入内容重叠 */
.icon-input-group .input-with-icon {
padding-right: 34px;
@@ -379,6 +520,17 @@ const goForget = () => {
box-shadow: 0 0 0 2px #e3f2ffb1;
}
/* 极验验证码容器样式 */
.geetest-container {
margin: 10px 0;
padding: 5px 0;
width: 100%;
min-height: 60px;
border-radius: 7px;
background: #f7fbfe;
border: 1.3px solid #d6e6fa;
}
/* 记住我单选框 */
.remember-me-row {
display: flex;
@@ -391,12 +543,14 @@ const goForget = () => {
color: #6d8eb8;
user-select: none;
}
.remember-me-label {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.remember-me-checkbox {
width: 16px;
height: 16px;
@@ -421,13 +575,16 @@ const goForget = () => {
background 0.2s,
transform 0.13s;
}
.login-btn:active {
transform: scale(0.98);
}
.login-btn:disabled {
background: #b6dafc;
cursor: not-allowed;
}
.error-msg {
color: #e4574a;
background: #fdeceb;
@@ -439,22 +596,28 @@ const goForget = () => {
letter-spacing: 0.3px;
animation: shake 0.28s;
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-6px);
}
40% {
transform: translateX(6px);
}
60% {
transform: translateX(-2px);
}
80% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
@@ -470,24 +633,29 @@ const goForget = () => {
margin-bottom: 0;
min-height: 22px;
}
.action-links a {
cursor: pointer;
color: #407ad6;
text-decoration: none;
transition: color 0.16s;
}
.action-links a:hover {
color: #165eec;
text-decoration: underline;
}
.action-links .divider {
color: #bbd3ee;
margin: 0 6px;
font-size: 13px;
}
.register-link {
margin-right: 0px;
}
.forget-link {
margin-left: 0px;
}
@@ -497,6 +665,7 @@ const goForget = () => {
.fade-leave-active {
transition: opacity 0.24s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
@@ -511,6 +680,7 @@ const goForget = () => {
opacity: 0.4;
z-index: 1;
}
.light1 {
width: 340px;
height: 340px;
@@ -518,6 +688,7 @@ const goForget = () => {
left: -60px;
background: radial-gradient(circle at 60% 50%, #55b7f988 0%, #e1e8fa11 95%);
}
.light2 {
width: 260px;
height: 260px;
@@ -525,22 +696,26 @@ const goForget = () => {
bottom: -90px;
background: radial-gradient(circle at 55% 60%, #f3e7ff99 0%, #daf3ff10 100%);
}
@media (max-width: 940px) {
.login-card {
min-width: 330px;
flex-direction: column;
}
.login-side {
width: 100%;
min-width: 0;
border-radius: 0 0 18px 18px;
}
.login-panel {
padding: 30px 22px 34px 22px;
min-width: 0;
}
.copyright {
padding-top: 13px;
}
}
</style>
</style>