hotline-web/src/views/login/component/Account.vue

<template>
	<el-form size="large" class="login-content-form" ref="ruleFormRef" :model="state.ruleForm" @submit.native.prevent>
		<motion :delay="100">
			<el-form-item class="mb30" prop="username" :rules="[{ required: true, message: '请填写账号', trigger: 'blur' }]">
				<el-input
					type="text"
					class="inputDeep"
					placeholder="请填写账号"
					v-model="state.ruleForm.username"
					clearable
					@keyup.enter="onSignIn(ruleFormRef)"
					autocomplete="off"
					@input="blurUserName"
				>
					<template #prefix>
						<SvgIcon name="ele-User" class="el-input__icon" />
					</template>
				</el-input>
			</el-form-item>
		</motion>
		<motion :delay="200">
			<el-form-item class="mb30" prop="password" :rules="[{ required: true, message: '请填写密码', trigger: 'blur' }]">
				<el-input
					class="inputDeep"
					clearable
					show-password
					placeholder="请填写密码"
					v-model="state.ruleForm.password"
					@keyup.enter="onSignIn(ruleFormRef)"
					autocomplete="off"
				>
					<template #prefix>
						<SvgIcon name="ele-Unlock" class="el-input__icon" />
					</template>
				</el-input>
			</el-form-item>
		</motion>
		<motion :delay="400" v-if="themeConfig.isLoginMessageCode">
			<el-form-item prop="msgCode" class="mb30" :rules="[{ required: msgCodeRequired, message: '请填写短信验证码', trigger: 'blur' }]">
				<el-col :span="11">
					<el-input
						type="text"
						maxlength="6"
						placeholder="请填写短信验证码"
						v-model="state.ruleForm.msgCode"
						clearable
						autocomplete="off"
						class="inputDeep"
						@keyup.enter="onSignIn(ruleFormRef)"
					>
						<template #prefix>
							<SvgIcon name="ele-ChatDotSquare" class="el-input__icon" />
						</template>
					</el-input>
				</el-col>
				<el-col :span="12" :offset="1">
					<el-button class="login-content-code w100" :disabled="isDisabled" @click="getIdentifyCodeBtn">{{
						isDisabled ? countText : click
					}}</el-button>
				</el-col>
			</el-form-item>
		</motion>
		<motion :delay="400">
			<el-form-item>
				<el-button type="primary" class="login-content-submit" round @click="onSignIn(ruleFormRef)" :loading="state.loading">登录</el-button>
				<puzzle-Code :show="showCode" @success="success" @close="close" @fail="fail" :imgs="imgList"></puzzle-Code>
			</el-form-item>
		</motion>
		<motion :delay="500"> 运营管理系统 <span class="color-danger font-bold">v5.0</span> </motion>
		<motion :delay="500">
			<div class="login-msg">
				<div>联系管理员<b>重置密码</b></div>
				<!-- <el-button link type="primary" class="font16" @click="forgetPwd">忘记密码</el-button> -->
			</div>
		</motion>
	</el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { reactive, computed, ref, defineAsyncComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElNotification } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { initFrontEndControlRoutes } from '@/router/frontEnd';
import { initBackEndControlRoutes } from '@/router/backEnd';
import { Session, Local, Cookie } from '@/utils/storage';
import { formatAxis } from '@/utils/formatTime';
import { NextLoading } from '@/utils/loading';
import type { FormInstance } from 'element-plus';
import { sendCode, signIn, whiteList } from '@/api/login';
import { JSEncrypt } from 'jsencrypt'; // rsa加密
import { getImageUrl, throttle } from '@/utils/tools';
import Motion from '@/utils/motion';
//引入'vue3-puzzle-vcode'插件
import puzzleCode from 'vue3-puzzle-vcode';

// 定义变量内容
const storesThemeConfig = useThemeConfig(); // 主题配置
const { themeConfig } = storeToRefs(storesThemeConfig); // 主题配置
const route = useRoute(); // 路由
const router = useRouter(); // 路由
const state = reactive<any>({
	ruleForm: {
		username: '', // 账号
		password: '', // 密码
		msgCode: '', // 短信验证码
	},
	loading: false, // 加载
});
const ruleFormRef = ref<FormInstance>(); // 表单ref
// 时间获取
const currentTime = computed(() => {
	return formatAxis(new Date());
});
const count = ref(300); // 倒计时
const countText = ref('s后重新获取'); // 倒计时文本
const click = ref('获取验证码'); // 点击
const isDisabled = ref(false); // 是否禁用
const msgCodeRequired = ref(false); // 短信验证码是否必填
// 验证账号是否是必须填写短信验证码
const blurUserName = throttle(() => {
	if (themeConfig.value.isLoginMessageCode) {
		whiteList({ UserName: state.ruleForm.username })
			.then((res: any) => {
				msgCodeRequired.value = res.result;
				isDisabled.value = false;
				count.value = 300;
			})
			.catch(() => {
				msgCodeRequired.value = false;
			});
	}
}, 300);
const getIdentifyCodeBtn = () => {
	if (!state.ruleForm.username) {
		ruleFormRef.value?.validateField('username');
		return;
	}
	// state.loading = true;
	// 获取短信验证码
	sendCode(state.ruleForm.username)
		.then((res: any) => {
			if (res.result != '验证码发送成功') {
				countText.value = res.result;
				ElNotification({
					title: '提示',
					message: res.result,
					type: 'info',
				});
				isDisabled.value = true;
			} else {
				countDown();
				ElMessage.success('短信验证码已发送，请注意查收');
			}
		})
		.catch(() => {
			// state.loading = false;
		});
};
// 倒计时
const countDown = () => {
	if (count.value === 0) {
		isDisabled.value = false;
		click.value = '获取验证码';
		count.value = 300;
		countText.value = `${count.value}s后重新获取`;
		return;
	} else {
		count.value--;
		click.value = count.value + 's后重新获取';
		countText.value = `${count.value}s后重新获取`;
		isDisabled.value = true;
		setTimeout(() => {
			countDown();
		}, 1000);
	}
};
const imgList = [getImageUrl('login/code1.png'), getImageUrl('login/code2.png'), getImageUrl('login/code3.png'), getImageUrl('login/code4.png')];
const showCode = ref(false); // 是否展示验证码
const success = () => {
	// 验证成功
	showCode.value = false;
	state.loading = true;
	// 新建一个JSEncrypt对象
	const encryptor = new JSEncrypt({ default_key_size: '2048' });
	// 设置公钥
	const publicKey =
		'-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgw+/x6IQPkH0A4eoF63jkLThsOXWyNBdcL9LATGy/G1yTHOr1RyKJB//iNug+V8DIoIHuFTlhgLHDbSqxvRWMONxIIF289riS6bDI4Ox/pFmOfmElFRk0lKGihaTE2Aefd6g/N+RfLLaHWztY+/voVeDTiOIw9y3tokIxjKwuJ/mQ66MkKh78AqQjjSD/3jcBP8ZhMyCJOK9XQcqvhD6WBFWkxlAqKOWggDU7YohfrbNkg3bd0oGE6zCE2EHhkcQbzGCh3lu1zf4TfKMXD+PPrr5JWDNYQTXFQklqgae+Puge7xxZGYRoi5YpIUnkQGm6zpPxhIOdxlz+Yb5geSJUQIDAQAB-----END PUBLIC KEY-----';
	encryptor.setPublicKey(publicKey); // publicKey为公钥
	// 加密数据
	const submitObj = {
		username: encryptor.encrypt(state.ruleForm.username),
		password: encryptor.encrypt(state.ruleForm.password),
		msgCode: encryptor.encrypt(state.ruleForm.msgCode),
	};
	signIn(submitObj)
		.then(async (res: any) => {
			//登录
			// 存储 token 到浏览器缓存
			Cookie.set('token', res.result);
			if (!themeConfig.value.isRequestRoutes) {
				// 前端控制路由，2、请注意执行顺序
				const isNoPower = await initFrontEndControlRoutes();
				signInSuccess(isNoPower);
			} else {
				// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
				// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
				const isNoPower = await initBackEndControlRoutes();
				// 执行完 initBackEndControlRoutes，再执行 signInSuccess
				signInSuccess(isNoPower);
			}
		})
		.catch(() => {
			state.loading = false;
		});
};
const close = () => {
	// 关闭验证码
	showCode.value = false;
};
const fail = () => {
	// 验证失败
};
// 登录
const onSignIn = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		showCode.value = true;
	});
}, 1000);
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
	if (isNoPower) {
		state.loading = false;
		ElNotification({
			title: '提示',
			message: '抱歉，您没有登录权限，请联系管理员',
			type: 'warning',
		});
		Session.clear();
		Cookie.clear();
		Local.clear();
	} else {
		// 初始化登录成功时间问候语
		let currentTimeInfo = currentTime.value;
		// 登录成功，跳到转首页
		/*// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
		if (route.query?.redirect) {
			router.push({
				path: <string>route.query?.redirect,
				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
			});
		} else {
			router.push('/');
		}*/
		router.push('/');
		// 设置登录成功后的时间问候语
		Cookie.set('userName', state.ruleForm.username);
		// 登录成功提示
		// 关闭 loading
		state.loading = true;
		const signInText = '欢迎回来！';
		ElNotification({
			type: 'success',
			title: `${currentTimeInfo}`,
			message: `${signInText}`,
		});
		NextLoading.start();
	}
};
</script>

<style scoped lang="scss">
.inputDeep {
	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
		border-radius: 0;
		border-bottom: 1px solid var(--el-input-border-color, var(--el-border-color));
	}
	:deep(.el-form-item.is-error .el-input__wrapper.is-focus) {
		box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
	}
}

.login-content-form {
	margin-top: 20px;
	font-size: var(--el-font-size-medium);

	:deep(.el-input--large) {
		font-size: var(--el-font-size-medium);
	}

	:deep(.el-form-item__error) {
		font-size: var(--el-font-size-medium);
	}

	.login-content-submit {
		width: 100%;
		margin-top: 25px;
		height: 50px;
		border-radius: 30px;
		font-size: 16px;
		letter-spacing: 5px;
	}

	.login-msg {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--el-color-primary);
		b {
			color: #999;
			padding-left: 4px;
		}
	}
}
</style>