增加极验模块

This commit is contained in:
李志强 2026-02-26 17:38:03 +08:00
parent 6686cee4d9
commit ef5eb809bc
7 changed files with 1203 additions and 150 deletions

View File

@ -1,14 +1,14 @@
import request from "@/utils/request";
// 登录(使用租户名称)
export function login(account, password, tenant_name) {
export function login(data) {
return request({
url: `/admin/login`,
method: "post",
data: {
account: account,
password: password,
tenant_name: tenant_name,
tenant_name: data.tenant_name,
account: data.account,
password: data.password,
},
});
}
@ -32,3 +32,36 @@ export function logout(userInfo = null) {
data: userInfo ? { userInfo: userInfo } : {},
});
}
/**
* 获取极验3.0数据
* @returns {Promise}
*/
export function getGeetest3Infos() {
return request({
url: '/admin/login/getGeetest3Infos',
method: 'get'
});
}
/**
* 获取极验4.0数据
* @returns {Promise}
*/
export function getGeetest4Infos() {
return request({
url: '/admin/login/getGeetest4Infos',
method: 'get'
});
}
/**
* 判断是否开启验证
* @returns {Promise}
*/
export function getOpenVerify() {
return request({
url: '/admin/login/getOpenVerify',
method: 'get'
});
}

353
src/assets/js/gt.0.5.0.js Normal file
View File

@ -0,0 +1,353 @@
"v0.5.0 Geetest Inc.";
(function (window) {
"use strict";
if (typeof window === 'undefined') {
throw new Error('Geetest requires browser environment');
}
var document = window.document;
var Math = window.Math;
var head = document.getElementsByTagName("head")[0];
function _Object(obj) {
this._obj = obj;
}
_Object.prototype = {
_each: function (process) {
var _obj = this._obj;
for (var k in _obj) {
if (_obj.hasOwnProperty(k)) {
process(k, _obj[k]);
}
}
return this;
}
};
function Config(config) {
var self = this;
new _Object(config)._each(function (key, value) {
self[key] = value;
});
}
Config.prototype = {
api_server: 'api.geetest.com',
protocol: 'http://',
typePath: '/gettype.php',
fallback_config: {
slide: {
static_servers: ["static.geetest.com", "static.geevisit.com"],
type: 'slide',
slide: '/static/js/geetest.0.0.0.js'
},
fullpage: {
static_servers: ["static.geetest.com", "static.geevisit.com"],
type: 'fullpage',
fullpage: '/static/js/fullpage.0.0.0.js'
}
},
_get_fallback_config: function () {
var self = this;
if (isString(self.type)) {
return self.fallback_config[self.type];
} else if (self.new_captcha) {
return self.fallback_config.fullpage;
} else {
return self.fallback_config.slide;
}
},
_extend: function (obj) {
var self = this;
new _Object(obj)._each(function (key, value) {
self[key] = value;
})
}
};
var isNumber = function (value) {
return (typeof value === 'number');
};
var isString = function (value) {
return (typeof value === 'string');
};
var isBoolean = function (value) {
return (typeof value === 'boolean');
};
var isObject = function (value) {
return (typeof value === 'object' && value !== null);
};
var isFunction = function (value) {
return (typeof value === 'function');
};
var MOBILE = /Mobi/i.test(navigator.userAgent);
var pt = MOBILE ? 3 : 0;
var callbacks = {};
var status = {};
var nowDate = function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (month >= 1 && month <= 9) {
month = '0' + month;
}
if (day >= 0 && day <= 9) {
day = '0' + day;
}
if (hours >= 0 && hours <= 9) {
hours = '0' + hours;
}
if (minutes >= 0 && minutes <= 9) {
minutes = '0' + minutes;
}
if (seconds >= 0 && seconds <= 9) {
seconds = '0' + seconds;
}
var currentdate = year + '-' + month + '-' + day + " " + hours + ":" + minutes + ":" + seconds;
return currentdate;
}
var random = function () {
return parseInt(Math.random() * 10000) + (new Date()).valueOf();
};
var loadScript = function (url, cb) {
var script = document.createElement("script");
script.charset = "UTF-8";
script.async = true;
// 对geetestçš„é™æ€èµ„æºæ·»åŠ crossOrigin
if ( /static\.geetest\.com/g.test(url)) {
script.crossOrigin = "anonymous";
}
script.onerror = function () {
cb(true);
};
var loaded = false;
script.onload = script.onreadystatechange = function () {
if (!loaded &&
(!script.readyState ||
"loaded" === script.readyState ||
"complete" === script.readyState)) {
loaded = true;
setTimeout(function () {
cb(false);
}, 0);
}
};
script.src = url;
head.appendChild(script);
};
var normalizeDomain = function (domain) {
// special domain: uems.sysu.edu.cn/jwxt/geetest/
// return domain.replace(/^https?:\/\/|\/.*$/g, ''); uems.sysu.edu.cn
return domain.replace(/^https?:\/\/|\/$/g, ''); // uems.sysu.edu.cn/jwxt/geetest
};
var normalizePath = function (path) {
path = path.replace(/\/+/g, '/');
if (path.indexOf('/') !== 0) {
path = '/' + path;
}
return path;
};
var normalizeQuery = function (query) {
if (!query) {
return '';
}
var q = '?';
new _Object(query)._each(function (key, value) {
if (isString(value) || isNumber(value) || isBoolean(value)) {
q = q + encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
}
});
if (q === '?') {
q = '';
}
return q.replace(/&$/, '');
};
var makeURL = function (protocol, domain, path, query) {
domain = normalizeDomain(domain);
var url = normalizePath(path) + normalizeQuery(query);
if (domain) {
url = protocol + domain + url;
}
return url;
};
var load = function (config, send, protocol, domains, path, query, cb) {
var tryRequest = function (at) {
var url = makeURL(protocol, domains[at], path, query);
loadScript(url, function (err) {
if (err) {
if (at >= domains.length - 1) {
cb(true);
// report gettype error
if (send) {
config.error_code = 508;
var url = protocol + domains[at] + path;
reportError(config, url);
}
} else {
tryRequest(at + 1);
}
} else {
cb(false);
}
});
};
tryRequest(0);
};
var jsonp = function (domains, path, config, callback) {
if (isObject(config.getLib)) {
config._extend(config.getLib);
callback(config);
return;
}
if (config.offline) {
callback(config._get_fallback_config());
return;
}
var cb = "geetest_" + random();
window[cb] = function (data) {
if (data.status == 'success') {
callback(data.data);
} else if (!data.status) {
callback(data);
} else {
callback(config._get_fallback_config());
}
window[cb] = undefined;
try {
delete window[cb];
} catch (e) {
}
};
load(config, true, config.protocol, domains, path, {
gt: config.gt,
callback: cb
}, function (err) {
if (err) {
callback(config._get_fallback_config());
}
});
};
var reportError = function (config, url) {
load(config, false, config.protocol, ['monitor.geetest.com'], '/monitor/send', {
time: nowDate(),
captcha_id: config.gt,
challenge: config.challenge,
pt: pt,
exception_url: url,
error_code: config.error_code
}, function (err) {})
}
var throwError = function (errorType, config) {
var errors = {
networkError: '网络错误',
gtTypeError: 'gt字段不是字符串类åž'
};
if (typeof config.onError === 'function') {
config.onError(errors[errorType]);
} else {
throw new Error(errors[errorType]);
}
};
var detect = function () {
return window.Geetest || document.getElementById("gt_lib");
};
if (detect()) {
status.slide = "loaded";
}
window.initGeetest = function (userConfig, callback) {
var config = new Config(userConfig);
if (userConfig.https) {
config.protocol = 'https://';
} else if (!userConfig.protocol) {
config.protocol = window.location.protocol + '//';
}
// for KFC
if (userConfig.gt === '050cffef4ae57b5d5e529fea9540b0d1' ||
userConfig.gt === '3bd38408ae4af923ed36e13819b14d42') {
config.apiserver = 'yumchina.geetest.com/'; // for old js
config.api_server = 'yumchina.geetest.com';
}
if(userConfig.gt){
window.GeeGT = userConfig.gt
}
if(userConfig.challenge){
window.GeeChallenge = userConfig.challenge
}
if (isObject(userConfig.getType)) {
config._extend(userConfig.getType);
}
jsonp((config.api_server_v3 || [config.api_server || config.apiserver]), config.typePath, config, function (newConfig) {
var type = newConfig.type;
var init = function () {
config._extend(newConfig);
callback(new window.Geetest(config));
};
callbacks[type] = callbacks[type] || [];
var s = status[type] || 'init';
if (s === 'init') {
status[type] = 'loading';
callbacks[type].push(init);
load(config, true, config.protocol, newConfig.static_servers || newConfig.domains, newConfig[type] || newConfig.path, null, function (err) {
if (err) {
status[type] = 'fail';
throwError('networkError', config);
} else {
status[type] = 'loaded';
var cbs = callbacks[type];
for (var i = 0, len = cbs.length; i < len; i = i + 1) {
var cb = cbs[i];
if (isFunction(cb)) {
cb();
}
}
callbacks[type] = [];
}
});
} else if (s === "loaded") {
init();
} else if (s === "fail") {
throwError('networkError', config);
} else if (s === "loading") {
callbacks[type].push(init);
}
});
};
})(window);

487
src/assets/js/gt4.js Normal file
View File

@ -0,0 +1,487 @@
"v4.2.0 Geetest Inc.";
(function (window) {
"use strict";
if (typeof window === 'undefined') {
throw new Error('Geetest requires browser environment');
}
var document = window.document;
var Math = window.Math;
var head = document.getElementsByTagName("head")[0];
var TIMEOUT = 10000;
function _Object(obj) {
this._obj = obj;
}
_Object.prototype = {
_each: function (process) {
var _obj = this._obj;
for (var k in _obj) {
if (_obj.hasOwnProperty(k)) {
process(k, _obj[k]);
}
}
return this;
},
_extend: function (obj){
var self = this;
new _Object(obj)._each(function (key, value){
self._obj[key] = value;
})
}
};
var uuid = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0;
var v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
};
function Config(config) {
var self = this;
new _Object(config)._each(function (key, value) {
self[key] = value;
});
}
Config.prototype = {
apiServers: ['gcaptcha4.geetest.com','gcaptcha4.geevisit.com','gcaptcha4.gsensebot.com'],
staticServers: ["static.geetest.com",'static.geevisit.com'],
protocol: 'http://',
typePath: '/load',
fallback_config: {
bypass: {
staticServers: ["static.geetest.com",'static.geevisit.com'],
type: 'bypass',
bypass: '/v4/bypass.js'
}
},
_get_fallback_config: function () {
var self = this;
if (isString(self.type)) {
return self.fallback_config[self.type];
} else {
return self.fallback_config.bypass;
}
},
_extend: function (obj) {
var self = this;
new _Object(obj)._each(function (key, value) {
self[key] = value;
})
}
};
var isNumber = function (value) {
return (typeof value === 'number');
};
var isString = function (value) {
return (typeof value === 'string');
};
var isBoolean = function (value) {
return (typeof value === 'boolean');
};
var isObject = function (value) {
return (typeof value === 'object' && value !== null);
};
var isFunction = function (value) {
return (typeof value === 'function');
};
var MOBILE = /Mobi/i.test(navigator.userAgent);
var callbacks = {};
var status = {};
var random = function () {
return parseInt(Math.random() * 10000) + (new Date()).valueOf();
};
// bind 函数polify, 不带new功能的bind
var bind = function(target,context){
if(typeof target !== 'function'){
return;
}
var args = Array.prototype.slice.call(arguments,2);
if(Function.prototype.bind){
return target.bind(context, args);
}else {
return function(){
var _args = Array.prototype.slice.call(arguments);
return target.apply(context,args.concat(_args));
}
}
}
var toString = Object.prototype.toString;
var _isFunction = function(obj) {
return typeof(obj) === 'function';
};
var _isObject = function(obj) {
return obj === Object(obj);
};
var _isArray = function(obj) {
return toString.call(obj) == '[object Array]';
};
var _isDate = function(obj) {
return toString.call(obj) == '[object Date]';
};
var _isRegExp = function(obj) {
return toString.call(obj) == '[object RegExp]';
};
var _isBoolean = function(obj) {
return toString.call(obj) == '[object Boolean]';
};
function resolveKey(input){
return input.replace(/(\S)(_([a-zA-Z]))/g, function(match, $1, $2, $3){
return $1 + $3.toUpperCase() || "";
})
}
function camelizeKeys(input, convert){
if(!_isObject(input) || _isDate(input) || _isRegExp(input) || _isBoolean(input) || _isFunction(input)){
return convert ? resolveKey(input) : input;
}
if(_isArray(input)){
var temp = [];
for(var i = 0; i < input.length; i++){
temp.push(camelizeKeys(input[i]));
}
}else {
var temp = {};
for(var prop in input){
if(input.hasOwnProperty(prop)){
temp[camelizeKeys(prop, true)] = camelizeKeys(input[prop]);
}
}
}
return temp;
}
var loadScript = function (url, cb, timeout) {
var script = document.createElement("script");
script.charset = "UTF-8";
script.async = true;
// 对geetestçš„é™æ€èµ„æºæ·»åŠ crossOrigin
if ( /static\.geetest\.com/g.test(url)) {
script.crossOrigin = "anonymous";
}
script.onerror = function () {
cb(true);
// 错误触发了,超时逻辑就不用了
loaded = true;
};
var loaded = false;
script.onload = script.onreadystatechange = function () {
if (!loaded &&
(!script.readyState ||
"loaded" === script.readyState ||
"complete" === script.readyState)) {
loaded = true;
setTimeout(function () {
cb(false);
}, 0);
}
};
script.src = url;
head.appendChild(script);
setTimeout(function () {
if (!loaded) {
script.onerror = script.onload = null;
script.remove && script.remove();
cb(true);
}
}, timeout || TIMEOUT);
};
var normalizeDomain = function (domain) {
// special domain: uems.sysu.edu.cn/jwxt/geetest/
// return domain.replace(/^https?:\/\/|\/.*$/g, ''); uems.sysu.edu.cn
return domain.replace(/^https?:\/\/|\/$/g, ''); // uems.sysu.edu.cn/jwxt/geetest
};
var normalizePath = function (path) {
path = path && path.replace(/\/+/g, '/');
if (path.indexOf('/') !== 0) {
path = '/' + path;
}
return path;
};
var normalizeQuery = function (query) {
if (!query) {
return '';
}
var q = '?';
new _Object(query)._each(function (key, value) {
if (isString(value) || isNumber(value) || isBoolean(value)) {
q = q + encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
}
});
if (q === '?') {
q = '';
}
return q.replace(/&$/, '');
};
var makeURL = function (protocol, domain, path, query) {
domain = normalizeDomain(domain);
var url = normalizePath(path) + normalizeQuery(query);
if (domain) {
url = protocol + domain + url;
}
return url;
};
var load = function (config, protocol, domains, path, query, cb, handleCb) {
var tryRequest = function (at) {
// 处理jsonpåžè°ƒï¼Œè¿™é‡Œä¸ºäº†ä¿è¯æ¯ä¸ªä¸åŒjsonp都有唯一的åžè°ƒå‡½æ•°
if(handleCb){
var cbName = "geetest_" + random();
// 需要与预先定义好cbnameåæ•°ï¼Œåˆ 除对象
window[cbName] = bind(handleCb, null, cbName);
query.callback = cbName;
}
var url = makeURL(protocol, domains[at], path, query);
loadScript(url, function (err) {
if (err) {
// 超时或者出错的时候 移除回调
if(cbName){
try {
window[cbName] = function(){
window[cbName] = null;
}
} catch (e) {}
}
if (at >= domains.length - 1) {
cb(true);
// report gettype error
} else {
tryRequest(at + 1);
}
} else {
cb(false);
}
}, config.timeout);
};
tryRequest(0);
};
var jsonp = function (domains, path, config, callback) {
var handleCb = function (cbName, data) {
// 保证只执行一次,全部超时的情况下不会再触发;
if (data.status == 'success') {
callback(data.data);
} else if (!data.status) {
callback(data);
} else {
//接口有返回,但是返回了错误状态,进入报错逻辑
callback(data);
}
window[cbName] = undefined;
try {
delete window[cbName];
} catch (e) {
}
};
load(config, config.protocol, domains, path, {
callback: '',
captcha_id: config.captchaId,
challenge: config.challenge || uuid(),
client_type: config.clientType ? config.clientType : (MOBILE? 'h5':'web'),
risk_type: config.riskType,
user_info: config.userInfo,
call_type: config.callType,
lang: config.language? config.language : navigator.appName === 'Netscape' ? navigator.language.toLowerCase() : navigator.userLanguage.toLowerCase()
}, function (err) {
// ç½‘ç»œé—®é¢˜æŽ¥å£æ²¡æœ‰è¿”å›žï¼Œç›´æŽ¥ä½¿ç”¨æœ¬åœ°éªŒè¯ç ï¼Œèµ°å®•æœºæ¨¡å¼
// è¿™é‡Œå¯ä»¥æ·»åŠ ç”¨æˆ·çš„é€»è¾‘
if(err && typeof config.offlineCb === 'function'){
// 执行自己的宕机
config.offlineCb();
return;
}
if(err){
callback(config._get_fallback_config());
}
}, handleCb);
};
var reportError = function (config, url) {
load(config, config.protocol, ['monitor.geetest.com'], '/monitor/send', {
time: Date.now().getTime(),
captcha_id: config.gt,
challenge: config.challenge,
exception_url: url,
error_code: config.error_code
}, function (err) {})
}
var throwError = function (errorType, config, errObj) {
var errors = {
networkError: '网络错误',
gtTypeError: 'gt字段不是字符串类åž'
};
if (typeof config.onError === 'function') {
config.onError({
desc: errObj.desc,
msg: errObj.msg,
code: errObj.code
});
} else {
throw new Error(errors[errorType]);
}
};
var detect = function () {
return window.Geetest || document.getElementById("gt_lib");
};
if (detect()) {
status.slide = "loaded";
}
var GeetestIsLoad = function (fname) {
var GeetestIsLoad = false;
var tags = { js: 'script', css: 'link' };
var tagname = fname && tags[fname.split('.').pop()];
if (tagname !== undefined) {
var elts = document.getElementsByTagName(tagname);
for (var i in elts) {
if ((elts[i].href && elts[i].href.toString().indexOf(fname) > 0)
|| (elts[i].src && elts[i].src.toString().indexOf(fname) > 0)) {
GeetestIsLoad = true;
}
}
}
return GeetestIsLoad;
};
window.initGeetest4 = function (userConfig,callback) {
var config = new Config(userConfig);
if (userConfig.https) {
config.protocol = 'https://';
} else if (!userConfig.protocol) {
config.protocol = window.location.protocol + '//';
}
if (isObject(userConfig.getType)) {
config._extend(userConfig.getType);
}
jsonp(config.apiServers , config.typePath, config, function (newConfig) {
//错误捕获,第一个load请æ±å¯èƒ½ç´æŽ¥æŠ¥é”™
var newConfig = camelizeKeys(newConfig);
if(newConfig.status === 'error'){
return throwError('networkError', config, newConfig);
}
var type = newConfig.type;
if(config.debug){
new _Object(newConfig)._extend(config.debug)
}
var init = function () {
config._extend(newConfig);
callback(new window.Geetest4(config));
};
callbacks[type] = callbacks[type] || [];
var s = status[type] || 'init';
if (s === 'init') {
status[type] = 'loading';
callbacks[type].push(init);
if(newConfig.gctPath){
load(config, config.protocol, Object.hasOwnProperty.call(config, 'staticServers') ? config.staticServers : newConfig.staticServers || config.staticServers , newConfig.gctPath, null, function (err){
if(err){
throwError('networkError', config, {
code: '60205',
msg: 'Network failure',
desc: {
detail: 'gct resource load timeout'
}
});
}
})
}
load(config, config.protocol, Object.hasOwnProperty.call(config, 'staticServers') ? config.staticServers : newConfig.staticServers || config.staticServers, newConfig.bypass || (newConfig.staticPath + newConfig.js), null, function (err) {
if (err) {
status[type] = 'fail';
throwError('networkError', config, {
code: '60204',
msg: 'Network failure',
desc: {
detail: 'js resource load timeout'
}
});
} else {
status[type] = 'loaded';
var cbs = callbacks[type];
for (var i = 0, len = cbs.length; i < len; i = i + 1) {
var cb = cbs[i];
if (isFunction(cb)) {
cb();
}
}
callbacks[type] = [];
status[type] = 'init';
}
});
} else if (s === "loaded") {
// 判æ­gct是否需要重æ°åŠ è½½
if(newConfig.gctPath && !GeetestIsLoad(newConfig.gctPath)){
load(config, config.protocol, Object.hasOwnProperty.call(config, 'staticServers') ? config.staticServers : newConfig.staticServers || config.staticServers , newConfig.gctPath, null, function (err){
if(err){
throwError('networkError', config, {
code: '60205',
msg: 'Network failure',
desc: {
detail: 'gct resource load timeout'
}
});
}
})
}
return init();
} else if (s === "fail") {
throwError('networkError', config, {
code: '60204',
msg: 'Network failure',
desc: {
detail: 'js resource load timeout'
}
});
} else if (s === "loading") {
callbacks[type].push(init);
}
});
};
})(window);

View File

@ -4,15 +4,6 @@
<el-button size="small" @click="handleCollapse">
<i class="fa fa-bars"></i>
</el-button>
<!-- <el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item :to="{ path: '/' }"
style="position: relative !important; top: 1px !important;">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"
:to="(item.label === '首页' || index === breadcrumbs.length - 1) ? { path: item.path } : null"
style="position: relative !important; top: 1px !important;">
{{ item.label }}
</el-breadcrumb-item>
</el-breadcrumb> -->
</div>
<div class="r-content">
<!-- 返回首页按钮 -->
@ -223,6 +214,8 @@ const handleCommand = async (command) => {
localStorage.removeItem('tabs_list');
localStorage.removeItem('active_tab');
sessionStorage.removeItem('tabs_list');
localStorage.removeItem('tabs_list');
//
menuStore.resetMenus();

View File

@ -9,16 +9,26 @@
<el-radio-button value="1">图形</el-radio-button>
<el-radio-button value="2">短信</el-radio-button>
<el-radio-button value="3">邮箱</el-radio-button>
<el-radio-button value="4">极验</el-radio-button>
<el-radio-button value="4">极验3.0</el-radio-button>
<el-radio-button value="5">极验4.0</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="form.verifyModel === '4'">
<el-form-item label="极验ID" prop="geetestID">
<el-input v-model="form.geetestID" />
<el-form-item label="极验ID" prop="geetest3ID">
<el-input v-model="form.geetest3ID" />
</el-form-item>
<el-form-item label="极验KEY" prop="geetestKEY">
<el-input v-model="form.geetestKEY" />
<el-form-item label="极验KEY" prop="geetest3KEY">
<el-input v-model="form.geetest3KEY" />
</el-form-item>
</template>
<template v-if="form.verifyModel === '5'">
<el-form-item label="极验ID" prop="geetest4ID">
<el-input v-model="form.geetest4ID" />
</el-form-item>
<el-form-item label="极验KEY" prop="geetest4KEY">
<el-input v-model="form.geetest4KEY" />
</el-form-item>
</template>
@ -38,8 +48,10 @@ const formRef = ref();
const form = reactive({
openVerify: false,
verifyModel: "1",
geetestID: "",
geetestKEY: ""
geetest3ID: "",
geetest3KEY: "",
geetest4ID: "",
geetest4KEY: ""
});
const init = async () => {

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,20 +696,24 @@ 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;
}

View File

@ -420,14 +420,14 @@ const handleLogout = () => {
//
localStorage.removeItem("active_tab");
localStorage.removeItem("menu_cache_user_0");
localStorage.removeItem("1123567809876");
localStorage.removeItem("tabs_list");
localStorage.removeItem("token");
localStorage.removeItem("user");
localStorage.removeItem("tenant");
sessionStorage.removeItem("active_tab");
sessionStorage.removeItem("menu_cache_user_0");
sessionStorage.removeItem("456");
sessionStorage.removeItem("tabs_list");
sessionStorage.removeItem("token");
sessionStorage.removeItem("user");