登录key

zhouwx

2024-06-07 a309b65e80f3f21b5ab7c182acb9764f47c677f1

 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{