laws-sinotruk-mobile/src/views/user/Login.vue

<template>
  <div class="login-box">

    <van-field v-model="username" border center class="login-form-item" clearable placeholder="请输入账号"/>
    <van-field v-model="password" :autocomplete="false" border center class="login-form-item" placeholder="请输入密码" :type="passwordFieldType"
               @paste.native.capture.prevent="handleOperate">
      <template #right-icon>
        <div @click="switchPasswordType">
          <van-icon name="eye" v-if="passwordFieldType!=='password'"/>
          <van-icon name="closed-eye" v-else/>
        </div>
      </template>
    </van-field>
    <div class="random-image-box">
      <van-field v-model="captcha" maxlength="4" :autocomplete="false" border center class="login-form-item" clearable placeholder="请输入验证码"/>
      <template>
        <img class="random-image" v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode" alt="code"/>
      </template>
    </div>

    <van-button class="login-btn" size="large" type="info" @click="handleSubmit">登录</van-button>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getRSAPublicKey } from '@/utils/encryption'
import { JSEncrypt } from 'jsencrypt'
import { mapActions } from 'vuex'
import { getAction } from '@api/manage'
import * as dd from 'dingtalk-jsapi'

export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: '',
      captcha: '', // 验证码
      rsaPublicKey: '', // 公钥
      requestCodeSuccess: false, // 请求验证码图片是否成功
      randCodeImage: '', // 验证码图片
      passwordFieldType: 'password'
    }
  },
  created () {
    console.log('created')
    // 尝试通过钉钉登录
    // this.loginFromDingTalk()

    // 正常登录部分
    this.getPublicKey()
    this.handleChangeCheckCode()
  },
  methods: {
    ...mapActions(['Login']),
    // 尝试通过钉钉登录
    loginFromDingTalk () {
      console.log('尝试通过钉钉登录')
      if (dd.env.platform === 'notInDingTalk') {
        console.log('请在钉钉内打开')
        return false
      }
      const ddCorpId = process.env.VUE_APP_DING_CORP_ID
      console.log('ddCorpId', ddCorpId)
      dd.runtime.permission.requestAuthCode({
        cropId: ddCorpId,
        onSuccess: function (info) {
          console.log('dd requestAuthCode success:', info)
        }
      })
    },

    // 获取RSA公钥
    getPublicKey () {
      // 获取公钥
      getRSAPublicKey().then(res => {
        this.rsaPublicKey = res.result
      })
    },
    handleChangeCheckCode () {
      this.currdatetime = new Date().getTime()
      getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
        if (res.success) {
          this.randCodeImage = res.result
          this.requestCodeSuccess = true
        } else {
          this.requestCodeSuccess = false
        }
      }).catch(() => {
        this.requestCodeSuccess = false
      })
    },
    handleSubmit () {
      if (!this.username) {
        Toast('请输入账号')
        return
      }
      if (!this.password) {
        Toast('请输入密码')
        return
      }
      if (!this.captcha) {
        Toast('请输入验证码')
        return
      }
      const loginParams = {
        rsaPublicKey: this.rsaPublicKey
      }
      // 新建JSEncrypt对象
      const encrypt = new JSEncrypt()
      encrypt.setPublicKey(loginParams.rsaPublicKey)
      // 公钥加密
      loginParams.username = encrypt.encrypt(this.username)
      loginParams.password = encrypt.encrypt(this.password)
      loginParams.captcha = this.captcha
      loginParams.checkKey = this.currdatetime
      this.Login(loginParams).then(res => {
        console.log(res, 'res')
        this.loginSuccess()
      }).catch((err) => {
        if (err.code === 500) {
          this.$toast(err.message)
          // 刷新验证码
          this.handleChangeCheckCode()
          this.captcha = ''
        }
      })
    },
    loginSuccess () {
      Toast('登录成功')
      // const query = this.$route.query
      // if (query.redirect) {
      //   console.log('redirect:', query)
      //   this.$router.push({ path: query.redirect }).catch((res) => {
      //     console.log(res)
      //   })
      // } else {
      this.$router.push({ path: '/search/generalSearch' }).catch((res) => {
        console.log(res)
      })
      // }
    },
    //  密码禁止粘贴
    handleOperate () {
      return false
    },
    switchPasswordType () {
      this.passwordFieldType = this.passwordFieldType === 'password' ? 'text' : 'password'
    }
  }
}
</script>

<style scoped lang="less">
.login-box {
  height: 100vh;
  padding: 20px;
  background-color: #ccc;
  .login-form-item {
    margin: 20px 0;
  }
  .login-btn {
    background-color: @primary-color;
  }
}
</style>