From a309b65e80f3f21b5ab7c182acb9764f47c677f1 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 07 六月 2024 15:48:11 +0800
Subject: [PATCH] 登录key
---
src/views/Login.vue | 324 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 254 insertions(+), 70 deletions(-)
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 04a3ee7..7d00b20 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -6,102 +6,286 @@
</div>
<div class="login">
- <a-form
+ <a-form-model
layout="horizontal"
- :form="form"
- @submit="handleSubmit"
+ :model="form"
+ ref="ruleForm"
+ :rules="rules"
class="login-form"
>
- <a-tabs default-active-key="1" @change="callback">
- <a-tab-pane key="1" tab="用户名登录">
- <a-form-item>
- <a-input
- placeholder="请输入用户"
- size="large"
- >
- <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
- </a-input>
- </a-form-item>
- <a-form-item>
- <a-input-password
- type="password"
- placeholder="请输入密码"
- size="large"
- >
- <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
- </a-input-password>
- </a-form-item>
- </a-tab-pane>
- <a-tab-pane key="2" tab="验证码登录" force-render>
- <a-form-item>
- <a-input
- placeholder="手机号"
- size="large"
- >
- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />
- </a-input>
- </a-form-item>
- <a-form-item>
- <a-row :gutter="8">
- <a-col :span="17">
- <a-input placeholder="验证码">
- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />
- </a-input>
- </a-col>
- <a-col :span="7">
- <a-button style="width: 100%">获取验证码</a-button>
- </a-col>
- </a-row>
- </a-form-item>
- </a-tab-pane>
- </a-tabs>
+ <a-form-model-item ref="name" prop="name">
+ <a-input
+ placeholder="请输入用户名"
+ size="large"
+ v-model="form.name"
+ autocomplete="new-password"
+ >
+ <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
+ </a-input>
+ </a-form-model-item>
+ <a-form-model-item ref="pwd" prop="pwd">
+ <a-input-password
+ type="password"
+ placeholder="请输入密码"
+ size="large"
+ v-model="form.pwd"
+ autocomplete="new-password"
+ >
+ <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
+ </a-input-password>
+ </a-form-model-item>
+<!-- <a-tabs default-active-key="1" @change="callback">-->
+<!-- <a-tab-pane key="1" tab="用户名登录">-->
+<!-- <a-form-item>-->
+<!-- <a-input-->
+<!-- placeholder="请输入用户"-->
+<!-- size="large"-->
+<!-- v-model="form.name"-->
+<!-- >-->
+<!-- <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />-->
+<!-- </a-input>-->
+<!-- </a-form-item>-->
+<!-- <a-form-item>-->
+<!-- <a-input-password-->
+<!-- type="password"-->
+<!-- placeholder="请输入密码"-->
+<!-- size="large"-->
+<!-- v-model="form.pwd"-->
+<!-- >-->
+<!-- <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />-->
+<!-- </a-input-password>-->
+<!-- </a-form-item>-->
+<!-- </a-tab-pane>-->
+<!-- <a-tab-pane key="2" tab="验证码登录" force-render>-->
+<!-- <a-form-item>-->
+<!-- <a-input-->
+<!-- placeholder="手机号"-->
+<!-- size="large"-->
+<!-- >-->
+<!-- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />-->
+<!-- </a-input>-->
+<!-- </a-form-item>-->
+<!-- <a-form-item>-->
+<!-- <a-row :gutter="8">-->
+<!-- <a-col :span="17">-->
+<!-- <a-input placeholder="验证码">-->
+<!-- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />-->
+<!-- </a-input>-->
+<!-- </a-col>-->
+<!-- <a-col :span="7">-->
+<!-- <a-button style="width: 100%">获取验证码</a-button>-->
+<!-- </a-col>-->
+<!-- </a-row>-->
+<!-- </a-form-item>-->
+<!-- </a-tab-pane>-->
+<!-- </a-tabs>-->
<div style="margin-bottom: 20px">
- <a-checkbox :checked="true" style="color:#fff;">自动登录</a-checkbox>
- <a style="float: right">忘记密码</a>
+ <a-checkbox :checked="saveAccount" style="color:#fff;" @change="isSave">记住密码</a-checkbox>
+<!-- <a style="float: right">忘记密码</a>-->
</div>
- <a-form-item style="text-align: center">
+ <div style="margin-bottom: 20px;height: auto;width: 100%;background-color: white;border-radius: 5px">
+ <div style="margin-left: 10px;display: flex;align-items: center;justify-content: space-between;padding: 0px 12px;">
+ <div v-if="keyMsg">
+ <a-icon style="color: lightcoral" type="exclamation-circle"/>
+ <span style="margin-left: 5px;line-height: 45px;font-size: 16px;color: lightcoral">{{keyMsg}}</span>
+ </div>
+ <div v-else>
+ <a-icon style="color: #52c41a" type="check-circle"/>
+ <span style="margin-left: 5px;line-height: 45px;font-size: 16px;color: #52c41a">加密证书检测成功</span>
+ </div>
+ <a-button
+ type="primary"
+ html-type="submit"
+ style="width: 20%;"
+ size="small"
+ @click="checkKey"
+ >
+ 重新检测
+ </a-button>
+ </div>
+ </div>
+ <div style="margin-bottom: 20px;float: right;" >
+ <span style="color: #1890ff;cursor: pointer" @click="downLoadLKey">驱动下载</span>
+ </div>
+
+ <div style="text-align: center">
<a-button
type="primary"
html-type="submit"
style="width: 100%"
size="large"
+ @click="handleSubmit"
+ :loading="isLoading"
+ v-preventReClick="1500"
>
登录
</a-button>
- </a-form-item>
- <center><p>技术支持：中国科学院</p></center>
- </a-form>
+ </div>
+ <center><p>技术支持：技术保障部</p></center>
+ </a-form-model>
</div>
</div>
</template>
<script>
+
+import { login, getMenuAdmin } from "@/api/login";
+import Cookies from 'js-cookie';
+import {Base64} from "js-base64";
+import SoftKey3W from './Syunew3W.js'
+
export default {
name: "login",
data() {
return {
+ isLoading: false,
+ saveAccount: false,
// hasErrors,
- form: this.$form.createForm(this),
+ // form: this.$form.createForm(this),
+ form: {
+ name: '',
+ pwd: '',
+ keyId:'',//锁id
+ keyUserName:'',//锁中的用户身份
+ returnEncData:'',//签名数据
+ rnd:"123"//随机字符
+ },
+ rules: {
+ name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+ pwd: [{ required: true, message: '请输入用户密码', trigger: 'blur' }]
+ },
+ menu: [],
+ keyMsg: '未检测到加密证书，请确保已连接',
};
},
- mounted() {
- this.$nextTick(() => {
- this.form.validateFields();
- });
+ created() {
+ // this.$nextTick(() => {
+ // this.form.validateFields();
+ // });
+ this.hasUserCodeOrPassword()
+ //检测key
+ this.checkKey()
},
methods: {
- handleSubmit(e) {
- e.preventDefault();
- this.form.validateFields((err, values) => {
- if (!err) {
- console.log("Received values of form: ", values);
- this.$router.push({ name: "default" });
+ downLoadLKey () {
+ console.log('222')
+ const { href } = this.$router.resolve({
+ path: '/downKey'
+ })
+ window.open(href,'_blank')
+
+ },
+ hasUserCodeOrPassword(){
+ if (localStorage.getItem('userName') && localStorage.getItem('userPassword')) {
+ this.form.name = localStorage.getItem('userName')
+ this.form.pwd = Base64.decode(localStorage.getItem('userPassword'))//解密
+ this.saveAccount = true
+ }
+ },
+ async checkKey() {
+ let mSoftKey3A = new SoftKey3W();//注意，由于USB的操作是异步的，所以所有函数的调用前必须加await !!!!!!!!!
+ let DevicePath = await mSoftKey3A.FindPort(1);//'查找是否存在多把加密锁
+ if (mSoftKey3A.GetLastError() == 0) {
+ this.keyMsg = "系统发现有2把及以上的加密证书"
+ return false
+ }
+ DevicePath = await mSoftKey3A.FindPort(0);//'查找是否存在加密锁
+ if (mSoftKey3A.GetLastError() != 0) {
+ this.keyMsg = "未检测到加密证书，请确保已连接"
+ return false
+ }
+ this.keyMsg = ""
+ },
+
+ isSave(e){
+ const t = this
+ t.saveAccount = !t.saveAccount
+ },
+ async checkUsbkeyData(){
+ let mSoftKey3A = new SoftKey3W();//注意，由于USB的操作是异步的，所以所有函数的调用前必须加await !!!!!!!!!
+ let DevicePath = await mSoftKey3A.FindPort(1);//'查找是否存在多把加密锁
+ console.log(mSoftKey3A,'mSoftKey3A')
+ if (mSoftKey3A.GetLastError() == 0) {
+ this.keyMsg = "系统发现有2把及以上的加密证书"
+ this.$message.warning( "系统发现有2把及以上的加密证书");
+ return false
+ }
+ DevicePath = await mSoftKey3A.FindPort(0);//'查找是否存在加密锁
+ if (mSoftKey3A.GetLastError() != 0) {
+ this.keyMsg = "未检测到加密证书，请确保已连接"
+ this.$message.warning( "未检测到加密证书，请确保已连接");
+ return false
+ }
+ console.log(DevicePath,'devpathhh')
+ //'读取锁的唯一ID
+ this.form.keyId=await mSoftKey3A.GetChipID(DevicePath);
+
+ if( mSoftKey3A.GetLastError()!= 0 )
+ {
+ this.$message.warning("返回芯片唯一ID时出现错误，错误码为："+mSoftKey3A.GetLastError().toString())
+ return false
+ }
+ console.log(this.form.keyId,'this.form.keyId')
+ //从锁中取出用户身份，与签名后的数据一并送到服务端进行验证。以验证用户身份
+ this.form.keyUserName=await mSoftKey3A.GetSm2UserName(DevicePath);
+
+ if( mSoftKey3A.GetLastError()!= 0 )
+ {
+ this.$message.warning( "返回用户身份时出现错误，错误码为："+mSoftKey3A.GetLastError().toString());
+ return false
+ }
+ console.log(this.form.keyUserName,'this.form.keyUserName')
+ //使用默认的PIN码
+ var Pin="123"
+ //这里使用锁中的私钥对身份-用户名及消息-随机数的进行数字签名,使用默认的PIN码，返回签名后的数据
+ this.form.rnd=String(parseInt(Math.random()*(65536+1),10));
+ this.form.returnEncData=await mSoftKey3A.YtSign(this.form.rnd,Pin,DevicePath);
+ if( mSoftKey3A.GetLastError()!= 0 )
+ {
+ this.$message.warning( "进行签名时出现错误，错误码为："+mSoftKey3A.GetLastError().toString());
+ return false
+ }
+ if(this.form.name!=this.form.keyUserName){
+ this.$message.warning( "用户身份不一致，无法登陆");
+ return false
+ }
+ console.log(this.form.returnEncData,'this.form.returnEncData')
+ console.log(this.form,'this.form')
+ return true
+ },
+
+ async handleSubmit() {
+ this.$refs.ruleForm.validate(async (valid) => {
+ if (valid) {
+ let checkUsb=await this.checkUsbkeyData()
+ if(!checkUsb){
+ return
+ }
+ this.isLoading = true
+ const res = await login(this.form)
+ if (res.data.code === 100) {
+ Cookies.set('resTk', res.data.data.tk);
+ Cookies.set('resUid', res.data.data.uid);
+ Cookies.set('userInfo',JSON.stringify(res.data.data),{expires: 7})
+ if (this.saveAccount) {
+ localStorage.setItem('userName', this.form.name)
+ localStorage.setItem('userPassword', Base64.encode(this.form.pwd))
+ } else {
+ localStorage.removeItem('userName')
+ localStorage.removeItem('userPassword')
+ }
+ this.$router.push('/home')
+ } else {
+ this.$message.warning(res.data.msg);
+ }
+ this.isLoading = false
+ } else {
+ console.log('error submit!!');
+ return false;
}
});
},
- callback(key) {
- console.log(key);
- },
+
},
};
</script>
@@ -129,7 +313,7 @@
}
.hedaer {
margin: 0px auto;
- padding-top:100px;
+ padding-top:200px;
width: 1000px;
text-align: center;
text-shadow:0 0 1px #000;
@@ -137,11 +321,11 @@
h1{font-size: 48px;color:#fff;}
}
.login {
-
+
.login-form {
width: 400px;
- margin: 60px auto 0px;
-
+ margin: 60px auto 0px;
+
}
}
.ant-tabs{
--
Gitblit v1.9.2