From 88ca245162a03d293bc5eb48a29f5fddf0a4b358 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Tue, 27 Sep 2022 14:02:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E5=8D=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/src/utils/index.js             |  11 ++
 .../src/views/main-navbar-update-password.vue | 165 ++++++++++++------
 epmet-oper-web/src/views/pages/login.vue      | 149 ++++++++++------
 3 files changed, 215 insertions(+), 110 deletions(-)

diff --git a/epmet-oper-web/src/utils/index.js b/epmet-oper-web/src/utils/index.js
index 80486e0..be79995 100644
--- a/epmet-oper-web/src/utils/index.js
+++ b/epmet-oper-web/src/utils/index.js
@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie'
 import store from '@/js/store'
+import JSEncrypt from 'jsencrypt' //引入加密
 
 /**
  * 获取字典数据列表
@@ -93,3 +94,13 @@ export function treeDataTranslate(data, id = 'id', pid = 'pid') {
   }
   return res
 }
+
+// 加密
+export function encryptedData(key, data) {
+  // 新建JSEncrypt对象
+  let encryptor = new JSEncrypt()
+  // 设置公钥
+  encryptor.setPublicKey(key)
+  // 加密数据
+  return encryptor.encrypt(data)
+}
diff --git a/epmet-oper-web/src/views/main-navbar-update-password.vue b/epmet-oper-web/src/views/main-navbar-update-password.vue
index b421aed..e4ac7b5 100644
--- a/epmet-oper-web/src/views/main-navbar-update-password.vue
+++ b/epmet-oper-web/src/views/main-navbar-update-password.vue
@@ -1,93 +1,157 @@
 <template>
-  <el-dialog :visible.sync="visible"
-             :title="$t('updatePassword.title')"
-             width="500px"
-             :close-on-click-modal="false"
-             :close-on-press-escape="false"
-             :append-to-body="true">
-    <el-form :model="dataForm"
-             :rules="dataRule"
-             ref="dataForm"
-             @keyup.enter.native="dataFormSubmitHandle()"
-             label-width="100px">
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('updatePassword.title')"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :append-to-body="true"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      label-width="100px"
+    >
       <el-form-item :label="$t('updatePassword.username')">
         <span>{{ $store.state.user.realName }}</span>
       </el-form-item>
-      <!-- <el-form-item prop="password"
-                    :label="$t('updatePassword.password')">
-        <el-input v-model="dataForm.password"
-                  type="password"
-                  :placeholder="$t('updatePassword.password')"></el-input>
-      </el-form-item> -->
-      <el-form-item prop="newPassword"
-                    :label="$t('updatePassword.newPassword')">
-        <el-input v-model="dataForm.newPassword"
-                  type="password"
-                  :placeholder="$t('updatePassword.newPassword')"></el-input>
+      <el-form-item prop="password" :label="$t('updatePassword.password')">
+        <el-input
+          v-model="dataForm.password"
+          type="password"
+          :placeholder="$t('updatePassword.password')"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="confirmPassword"
-                    :label="$t('updatePassword.confirmPassword')">
-        <el-input v-model="dataForm.confirmPassword"
-                  type="password"
-                  :placeholder="$t('updatePassword.confirmPassword')"></el-input>
+      <el-form-item
+        prop="newPassword"
+        :label="$t('updatePassword.newPassword')"
+      >
+        <el-input
+          v-model="dataForm.newPassword"
+          type="password"
+          placeholder="密码必须8-20个字符，而且同时包含大小写字母和数字"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        prop="confirmPassword"
+        :label="$t('updatePassword.confirmPassword')"
+      >
+        <el-input
+          v-model="dataForm.confirmPassword"
+          type="password"
+          :placeholder="$t('updatePassword.confirmPassword')"
+        ></el-input>
       </el-form-item>
     </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary"
-                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t('confirm')
+      }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
 import debounce from 'lodash/debounce'
-import { clearLoginInfo } from '@/utils'
+import { clearLoginInfo, encryptedData } from '@/utils'
 import { requestPost } from '@/js/dai/request'
 export default {
-  data () {
+  data() {
     return {
       visible: false,
+      pubKey: '',
       dataForm: {
-        // password: '',
+        password: '',
         newPassword: '',
         confirmPassword: ''
       }
     }
   },
   computed: {
-    dataRule () {
+    dataRule() {
       var validateConfirmPassword = (rule, value, callback) => {
         if (this.dataForm.newPassword !== value) {
-          return callback(new Error(this.$t('updatePassword.validate.confirmPassword')))
+          return callback(
+            new Error(this.$t('updatePassword.validate.confirmPassword'))
+          )
         }
         callback()
       }
       return {
-        // password: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        // ],
+        password: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
         newPassword: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
         ],
         confirmPassword: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          },
           { validator: validateConfirmPassword, trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
-    init () {
+    init() {
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
       })
+
+      //获取公钥
+      this.getPubKey()
+    },
+
+    // 获取公钥
+    getPubKey() {
+      this.$http
+        .post('/auth/govweb/getKey')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+
+          this.pubKey = res.data // 获取到公钥;
+        })
+        .catch(() => {})
+    },
+
+    validateComplexity(pwd) {
+      let regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}')
+
+      if (!regex.test(pwd)) {
+        this.$message({
+          message: '密码必须8-20个字符，而且同时包含大小写字母和数字',
+          type: 'error'
+        })
+        return false
+      }
+      return true
     },
+
     // 表单提交
-    dataFormSubmitHandle () {
+    dataFormSubmitHandle() {
       this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
+        if (!valid) return false
+        if (!this.validateComplexity(this.dataForm.newPassword)) return false
+
+        if (this.dataForm.newPassword !== this.dataForm.confirmPassword) {
+          this.$message.error('请输入相同密码')
           return false
         }
 
@@ -95,25 +159,20 @@ export default {
       })
     },
 
-    async submitForm () {
-
-      if (this.dataForm.newPassword !== this.dataForm.confirmPassword) {
-        this.$message.info('请输入相同密码')
-        return false
-      }
+    async submitForm() {
+      const { pubKey } = this
       const url = '/epmetuser/operuser/updatePwd'
       const params = {
-        //  workAuth: 1,
-        // resiAuth: 1,
-        newPassword: this.dataForm.newPassword,
-
+        oldPassword: encryptedData(pubKey, this.dataForm.password),
+        password: encryptedData(pubKey, this.dataForm.newPassword),
+        newPassword: encryptedData(pubKey, this.dataForm.newPassword),
+        confirmNewPassword: encryptedData(pubKey, this.dataForm.confirmPassword)
       }
 
       const { data, code, msg } = await requestPost(url, params)
       if (code === 0) {
         this.$message.success('操作成功')
         this.visible = false
-
       } else {
         this.$message.error(msg)
       }
diff --git a/epmet-oper-web/src/views/pages/login.vue b/epmet-oper-web/src/views/pages/login.vue
index 4f07493..d7a58f7 100644
--- a/epmet-oper-web/src/views/pages/login.vue
+++ b/epmet-oper-web/src/views/pages/login.vue
@@ -7,11 +7,13 @@
         </div>
         <div class="login-body">
           <h3 class="login-title">{{ $t('login.title') }}</h3>
-          <el-form :model="dataForm"
-                   :rules="dataRule"
-                   ref="dataForm"
-                   @keyup.enter.native="dataFormSubmitHandle()"
-                   status-icon>
+          <el-form
+            :model="dataForm"
+            :rules="dataRule"
+            ref="dataForm"
+            @keyup.enter.native="dataFormSubmitHandle()"
+            status-icon
+          >
             <!-- <el-form-item>
               <el-select v-model="$i18n.locale"
                          class="w-percent-100">
@@ -22,25 +24,22 @@
               </el-select>
             </el-form-item> -->
             <el-form-item prop="phone">
-              <el-input v-model="dataForm.phone"
-                        placeholder="手机号">
-                <span slot="prefix"
-                      class="el-input__icon">
-                  <svg class="icon-svg"
-                       aria-hidden="true">
+              <el-input v-model="dataForm.phone" placeholder="手机号">
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true">
                     <use xlink:href="#icon-user"></use>
                   </svg>
                 </span>
               </el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input v-model="dataForm.password"
-                        type="password"
-                        :placeholder="$t('login.password')">
-                <span slot="prefix"
-                      class="el-input__icon">
-                  <svg class="icon-svg"
-                       aria-hidden="true">
+              <el-input
+                v-model="dataForm.password"
+                type="password"
+                :placeholder="$t('login.password')"
+              >
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true">
                     <use xlink:href="#icon-lock"></use>
                   </svg>
                 </span>
@@ -49,39 +48,46 @@
             <el-form-item prop="captcha">
               <el-row :gutter="20">
                 <el-col :span="14">
-                  <el-input v-model="dataForm.captcha"
-                            :placeholder="$t('login.captcha')">
-                    <span slot="prefix"
-                          class="el-input__icon">
-                      <svg class="icon-svg"
-                           aria-hidden="true">
+                  <el-input
+                    v-model="dataForm.captcha"
+                    :placeholder="$t('login.captcha')"
+                  >
+                    <span slot="prefix" class="el-input__icon">
+                      <svg class="icon-svg" aria-hidden="true">
                         <use xlink:href="#icon-safetycertificate"></use>
                       </svg>
                     </span>
                   </el-input>
                 </el-col>
-                <el-col :span="10"
-                        class="login-captcha">
-                  <img :src="captchaPath"
-                       @click="getCaptcha()">
+                <el-col :span="10" class="login-captcha">
+                  <img :src="captchaPath" @click="getCaptcha()" />
                 </el-col>
               </el-row>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary"
-                         @click="dataFormSubmitHandle()"
-                         class="w-percent-100">{{ $t('login.title') }}</el-button>
+              <el-button
+                type="primary"
+                @click="dataFormSubmitHandle()"
+                class="w-percent-100"
+                >{{ $t('login.title') }}</el-button
+              >
             </el-form-item>
           </el-form>
         </div>
         <div class="login-footer">
           <p>
-            <a href="https://demo.cloud.renren.io/renren-cloud"
-               target="_blank">{{ $t('login.demo') }}</a>
+            <a
+              href="https://demo.cloud.renren.io/renren-cloud"
+              target="_blank"
+              >{{ $t('login.demo') }}</a
+            >
           </p>
           <!-- 2020 © renren.io -->
-          <p><a href="https://www.renren.io/"
-               target="_blank">{{ $t('login.copyright') }}</a></p>
+          <p>
+            <a href="https://www.renren.io/" target="_blank">{{
+              $t('login.copyright')
+            }}</a>
+          </p>
         </div>
       </main>
     </div>
@@ -92,12 +98,13 @@
 import Cookies from 'js-cookie'
 import debounce from 'lodash/debounce'
 import { messages } from '@/i18n'
-import { getUUID } from '@/utils'
+import { getUUID, encryptedData } from '@/utils'
 export default {
-  data () {
+  data() {
     return {
       i18nMessages: messages,
       captchaPath: '',
+      pubKey: '',
       dataForm: {
         app: 'oper',
         client: 'web',
@@ -110,11 +117,9 @@ export default {
     }
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
-        phone: [
-          { required: true, message: '手机号不能为空', trigger: 'blur' }
-        ],
+        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
         password: [
           { required: true, message: '密码不能为空', trigger: 'blur' }
         ],
@@ -124,32 +129,62 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     this.getCaptcha()
+
+    //获取公钥
+    this.getPubKey()
   },
   methods: {
     // 获取验证码
-    getCaptcha () {
+    getCaptcha() {
       this.dataForm.uuid = getUUID()
       this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}`
     },
-    // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid, messageObj) => {
-        if (!valid) {
-          app.util.validateRule(messageObj)
-        }
-        this.$http.post('/auth/login/operweb/loginbypassword', this.dataForm).then(({ data: res }) => {
+
+    // 获取公钥
+    getPubKey() {
+      this.$http
+        .post('/auth/govweb/getKey')
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-            this.getCaptcha()
             return this.$message.error(res.msg)
           }
-          localStorage.setItem('userType', 'oper')
-          Cookies.set('token', res.data.token)
-          this.$router.replace({ name: 'home' }).catch(() => { })
-        }).catch(() => { })
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
+
+          this.pubKey = res.data // 获取到公钥;
+        })
+        .catch(() => {})
+    },
+
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs['dataForm'].validate((valid, messageObj) => {
+          if (!valid) {
+            app.util.validateRule(messageObj)
+          }
+          const { pubKey } = this
+          this.$http
+            .post('/auth/login/operweb/loginbypassword', {
+              ...this.dataForm,
+              phone: encryptedData(pubKey, this.dataForm.phone),
+              password: encryptedData(pubKey, this.dataForm.password)
+            })
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.getCaptcha()
+                return this.$message.error(res.msg)
+              }
+              localStorage.setItem('userType', 'oper')
+              Cookies.set('token', res.data.token)
+              this.$router.replace({ name: 'home' }).catch(() => {})
+            })
+            .catch(() => {})
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    )
   }
 }
 </script>