|
|
@@ -1,68 +1,71 @@
|
|
|
<template>
|
|
|
<el-form size="large" class="login-content-form" ref="ruleFormRef" :model="state.ruleForm" @submit.native.prevent>
|
|
|
- <el-form-item class="mb30" prop="username" :rules="[{ required: true, message: '请填写账号', trigger: 'blur' }]">
|
|
|
+ <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"
|
|
|
+ @blur="blurUserName"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <SvgIcon name="ele-User" class="el-input__icon" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <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>
|
|
|
+ <el-form-item
|
|
|
+ prop="msgCode"
|
|
|
+ class="mb30"
|
|
|
+ :rules="[{ required: msgCodeRequired, message: '请填写短信验证码', trigger: 'blur' }]"
|
|
|
+ v-if="themeConfig.isLoginMessageCode"
|
|
|
+ >
|
|
|
+ <el-col :span="11">
|
|
|
<el-input
|
|
|
type="text"
|
|
|
- class="inputDeep"
|
|
|
- placeholder="请填写账号"
|
|
|
- v-model="state.ruleForm.username"
|
|
|
+ maxlength="6"
|
|
|
+ placeholder="请填写短信验证码"
|
|
|
+ v-model="state.ruleForm.msgCode"
|
|
|
clearable
|
|
|
- @keyup.enter="onSignIn(ruleFormRef)"
|
|
|
autocomplete="off"
|
|
|
- @blur="blurUserName"
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <SvgIcon name="ele-User" class="el-input__icon" />
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- <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" />
|
|
|
+ <SvgIcon name="ele-ChatDotSquare" class="el-input__icon" />
|
|
|
</template>
|
|
|
</el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="msgCode" class="mb30" :rules="[{ required: msgCodeRequired, message: '请填写短信验证码', trigger: 'blur' }]" v-if="themeConfig.isLoginMessageCode">
|
|
|
- <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>
|
|
|
- <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>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
运营管理系统 <span class="color-danger font-bold">v5.0</span>
|
|
|
- <div class="login-msg">
|
|
|
- <div>联系管理员<b>重置密码</b></div>
|
|
|
- <!-- <el-button link type="primary" class="font16" @click="forgetPwd">忘记密码</el-button> -->
|
|
|
- </div>
|
|
|
+ <div class="login-msg">
|
|
|
+ <div>联系管理员<b>重置密码</b></div>
|
|
|
+ <!-- <el-button link type="primary" class="font16" @click="forgetPwd">忘记密码</el-button> -->
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
|
|
|
@@ -78,9 +81,10 @@ 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 { sendCode, signIn, signInEncrypt, whiteList } from '@/api/login';
|
|
|
import { JSEncrypt } from 'jsencrypt'; // rsa加密
|
|
|
-import { getImageUrl, throttle, trimCompat } from '@/utils/tools';
|
|
|
+import { getImageUrl, guid, throttle, trimCompat } from '@/utils/tools';
|
|
|
+import CryptoJS from 'crypto-js'; // aes加密
|
|
|
//引入'vue3-puzzle-vcode'插件
|
|
|
import PuzzleCode from 'vue3-puzzle-vcode';
|
|
|
import { encryptionLoginKey } from '@/utils/constants';
|
|
|
@@ -163,11 +167,21 @@ const countDown = () => {
|
|
|
}
|
|
|
};
|
|
|
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;
|
|
|
+ if (['LuZhou'].includes(themeConfig.value.appScope)) {
|
|
|
+ // 泸州先行加密登录
|
|
|
+ encryptionLogin();
|
|
|
+ } else {
|
|
|
+ normalLogin();
|
|
|
+ }
|
|
|
+};
|
|
|
+// 普通登录
|
|
|
+const normalLogin = () => {
|
|
|
// 新建一个JSEncrypt对象
|
|
|
const encryptor = new JSEncrypt({ default_key_size: '2048' });
|
|
|
encryptor.setPublicKey(encryptionLoginKey); // publicKey为公钥
|
|
|
@@ -201,6 +215,59 @@ const success = () => {
|
|
|
state.loading = false;
|
|
|
});
|
|
|
};
|
|
|
+// 加密登录
|
|
|
+const encryptionLogin = () => {
|
|
|
+ const key = 'qlzeJrbj0CPkHdFBvEAxX47Y4nCbBPZW'; // 加密秘钥
|
|
|
+ const iv = 'JxeDP0sgnPJdH9fE'; // 偏移量
|
|
|
+ const key1 = CryptoJS.enc.Utf8.parse(key);
|
|
|
+ const iv1 = CryptoJS.enc.Utf8.parse(iv);
|
|
|
+
|
|
|
+ const usernameTrim = trimCompat(state.ruleForm.username);
|
|
|
+ const passwordTrim = trimCompat(state.ruleForm.password);
|
|
|
+ const usernameMesCode = trimCompat(state.ruleForm.msgCode);
|
|
|
+ // 加密数据
|
|
|
+ const submitObj = {
|
|
|
+ username: usernameTrim, // 用户名
|
|
|
+ password: passwordTrim, // 密码
|
|
|
+ msgCode: usernameMesCode, // 验证码
|
|
|
+ timestamp: new Date().getTime(), // 时间戳
|
|
|
+ nonce: guid(), // 随机数
|
|
|
+ };
|
|
|
+ const encrypted = CryptoJS.AES.encrypt(JSON.stringify(submitObj), key1, {
|
|
|
+ // 加密
|
|
|
+ iv: iv1,
|
|
|
+ mode: CryptoJS.mode.CBC,
|
|
|
+ padding: CryptoJS.pad.Pkcs7,
|
|
|
+ });
|
|
|
+ const encryptedStr = encrypted.toString(); // 加密后的字符串
|
|
|
+ /* const decrypted = CryptoJS.AES.decrypt(encrypted,key1, { // 解密
|
|
|
+ iv: iv1,
|
|
|
+ mode: CryptoJS.mode.CBC,
|
|
|
+ padding: CryptoJS.pad.Pkcs7
|
|
|
+ })
|
|
|
+ console.log('de: ',decrypted.toString(CryptoJS.enc.Utf8));*/
|
|
|
+ signInEncrypt({ signature: encryptedStr })
|
|
|
+ .then(async (res) => {
|
|
|
+ //登录
|
|
|
+ // 存储 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((err) => {
|
|
|
+ console.log('err: ', err);
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+};
|
|
|
const close = () => {
|
|
|
// 关闭验证码
|
|
|
showCode.value = false;
|
zhangchong