登录增加验证码

package-lock.json

@@ -10,8 +10,9 @@
       "dependencies": {
         "axios": "^0.26.1",
         "core-js": "^3.21.1",
-        "element-ui": "^2.15.6",
+        "element-ui": "^2.15.8",
         "js-cookie": "^3.0.1",
+        "md5": "^2.3.0",
         "normalize.css": "^8.0.1",
         "nprogress": "^0.2.0",
         "vue": "^2.6.14",
@@ -22,7 +23,7 @@
         "@babel/core": "^7.17.9",
         "@babel/eslint-parser": "^7.17.0",
         "@babel/preset-env": "^7.16.11",
-        "@rushstack/eslint-patch": "^1.1.1",
+        "@rushstack/eslint-patch": "^1.1.2",
         "@vue/cli-plugin-babel": "~4.5.17",
         "@vue/cli-plugin-eslint": "~4.5.17",
         "@vue/cli-plugin-router": "~4.5.17",
@@ -39,7 +40,7 @@
         "eslint-plugin-vue": "^8.6.0",
         "html-webpack-plugin": "^5.3.1",
         "postcss": "^8.4.12",
-        "postcss-html": "^1.3.0",
+        "postcss-html": "^1.3.1",
         "prettier": "2.6.2",
         "sass": "^1.50.0",
         "sass-loader": "^10.2.1",
@@ -2364,9 +2365,9 @@
       }
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz",
-      "integrity": "sha512-BUyKJGdDWqvWC5GEhyOiUrGNi9iJUr4CU0O2WxJL6QJhHeeA/NVBalH+FeK0r/x/W0rPymXt5s78TDS7d6lCwg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.2.tgz",
+      "integrity": "sha512-oe5WJEDaVsW8fBlGT7udrSCgOwWfoYHQOmSpnh8X+0GXpqqcRCP8k4y+Dxb0taWJDPpB+rdDUtumIiBwkY9qGA==",
       "dev": true
     },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
@@ -6147,6 +6148,14 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -7255,6 +7264,14 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -8561,9 +8578,9 @@
       "dev": true
     },
     "node_modules/element-ui": {
-      "version": "2.15.6",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.6.tgz",
-      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
+      "version": "2.15.8",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.8.tgz",
+      "integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==",
       "dependencies": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -11949,8 +11966,7 @@
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "node_modules/is-callable": {
       "version": "1.2.4",
@@ -14033,6 +14049,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -14603,6 +14629,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -16012,9 +16045,9 @@
       }
     },
     "node_modules/postcss-html": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.0.tgz",
-      "integrity": "sha512-ewbwd7OGW4dLsErtvZH9HpVMEcXnlhYSzKsr7MepGlOT8imHTIZ/+pdfEruLS+hTYapLTQAWDnoQcJpsYU4uRw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.1.tgz",
+      "integrity": "sha512-SJ7iRw+IngyZv3Z9lChlZU30a9y9MZjZZcoUJmx0T/nKE9S+hetJ8fAv/MRu4bPnGDsXhVlaFs5+umpK3yaaQQ==",
       "dev": true,
       "dependencies": {
         "htmlparser2": "^7.1.2",
@@ -25288,9 +25321,9 @@
       }
     },
     "@rushstack/eslint-patch": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz",
-      "integrity": "sha512-BUyKJGdDWqvWC5GEhyOiUrGNi9iJUr4CU0O2WxJL6QJhHeeA/NVBalH+FeK0r/x/W0rPymXt5s78TDS7d6lCwg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.2.tgz",
+      "integrity": "sha512-oe5WJEDaVsW8fBlGT7udrSCgOwWfoYHQOmSpnh8X+0GXpqqcRCP8k4y+Dxb0taWJDPpB+rdDUtumIiBwkY9qGA==",
       "dev": true
     },
     "@soda/friendly-errors-webpack-plugin": {
@@ -28408,6 +28441,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -29317,6 +29355,11 @@
         }
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -30371,9 +30414,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.15.6",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.6.tgz",
-      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
+      "version": "2.15.8",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.8.tgz",
+      "integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -32986,8 +33029,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
       "version": "1.2.4",
@@ -34630,6 +34672,16 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -35098,6 +35150,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -36231,9 +36290,9 @@
       }
     },
     "postcss-html": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.0.tgz",
-      "integrity": "sha512-ewbwd7OGW4dLsErtvZH9HpVMEcXnlhYSzKsr7MepGlOT8imHTIZ/+pdfEruLS+hTYapLTQAWDnoQcJpsYU4uRw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.1.tgz",
+      "integrity": "sha512-SJ7iRw+IngyZv3Z9lChlZU30a9y9MZjZZcoUJmx0T/nKE9S+hetJ8fAv/MRu4bPnGDsXhVlaFs5+umpK3yaaQQ==",
       "dev": true,
       "requires": {
         "htmlparser2": "^7.1.2",

package.json

@@ -12,8 +12,9 @@
   "dependencies": {
     "axios": "^0.26.1",
     "core-js": "^3.21.1",
-    "element-ui": "^2.15.6",
+    "element-ui": "^2.15.8",
     "js-cookie": "^3.0.1",
+    "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.6.14",
@@ -24,7 +25,7 @@
     "@babel/core": "^7.17.9",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
-    "@rushstack/eslint-patch": "^1.1.1",
+    "@rushstack/eslint-patch": "^1.1.2",
     "@vue/cli-plugin-babel": "~4.5.17",
     "@vue/cli-plugin-eslint": "~4.5.17",
     "@vue/cli-plugin-router": "~4.5.17",
@@ -41,7 +42,7 @@
     "eslint-plugin-vue": "^8.6.0",
     "html-webpack-plugin": "^5.3.1",
     "postcss": "^8.4.12",
-    "postcss-html": "^1.3.0",
+    "postcss-html": "^1.3.1",
     "prettier": "2.6.2",
     "sass": "^1.50.0",
     "sass-loader": "^10.2.1",

src/api/app.js

@@ -53,3 +53,19 @@ export function GetChildSysList_CanEnter_PC() {
     params
   });
 }
+
+/**
+ * 得到验证码图像
+ * @param { Object } data
+ * @returns
+ */
+export function GetVerificationCodeImage(data) {
+  let params = getRequestParams('login_control-GetVerificationCodeImage');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params,
+    data
+  });
+}

src/views/login/index.vue

@@ -29,6 +29,11 @@
             />
           </el-form-item>
 
+          <el-form-item class="verification-code" prop="verification_code_image_text">
+            <el-input v-model="loginForm.verification_code_image_text" />
+            <el-image v-if="image_content_base64.length > 0" :src="`data:image/jpg;base64,${image_content_base64}`" />
+          </el-form-item>
+
           <el-form-item class="form-remember">
             <el-row type="flex" justify="space-between">
               <el-col> <el-checkbox v-model="isRemember" /> 记住我</el-col>
@@ -58,32 +63,30 @@
 </template>
 
 <script>
-import { GetLogo } from '@/api/app';
+import { GetLogo, GetVerificationCodeImage } from '@/api/app';
 import { setConfig } from '@/utils/auth';
+import md5 from 'md5';
 
 export default {
   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (value.length < 0) {
-        callback(new Error('用户名不能为空！'));
-      } else {
-        callback();
-      }
-    };
-
     return {
       isRemember: true,
       loading: false,
       isAgree: true,
       loginForm: {
+        verification_code_image_text: '',
         user_name: 'admin',
         password: '123456',
-        user_type: 'ADMIN'
+        is_password_md5: 'true',
+        user_type: 'ADMIN',
+        verification_code_image_id: ''
       },
       loginRules: {
-        user_name: [{ require: true, trigger: 'blur', validator: validateUsername }]
-      }
+        user_name: [{ required: true, trigger: 'blur', message: '用户名不能为空！' }],
+        verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }]
+      },
+      image_content_base64: ''
     };
   },
   created() {
@@ -91,14 +94,21 @@ export default {
       document.title = res.title;
       setConfig(res);
     });
+
+    GetVerificationCodeImage().then(({ image_id, image_content_base64 }) => {
+      this.loginForm.verification_code_image_id = image_id;
+      this.image_content_base64 = image_content_base64;
+    });
   },
   methods: {
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
+          const loginForm = { ...this.loginForm };
+          loginForm.password = md5(loginForm.password).toUpperCase();
           this.$store
-            .dispatch('user/login', { loginForm: this.loginForm })
+            .dispatch('user/login', { loginForm })
             .then(() => {
               this.$router.push({ path: '/jump' });
               this.loading = false;
@@ -110,9 +120,8 @@ export default {
             .catch(() => {
               this.loading = false;
             });
-        } else {
-          return false;
         }
+        return false;
       });
     }
   }
@@ -155,8 +164,8 @@ export default {
     &-admin {
       width: 460px;
       min-width: 460px;
-      height: 500px;
-      min-height: 500px;
+      height: 550px;
+      min-height: 550px;
       background-color: #fff;
       border: 1px solid #ccc;
       border-radius: 8px;
@@ -173,14 +182,27 @@ export default {
         margin: 64px 64px 0;
 
         .form-remember {
-          padding-top: 20px;
-
           .forget-password {
             color: $basic-color;
             text-align: right;
           }
         }
 
+        .verification-code {
+          .el-input {
+            width: 120px;
+          }
+
+          .el-image {
+            margin-left: 24px;
+            vertical-align: bottom;
+
+            &__inner {
+              vertical-align: middle;
+            }
+          }
+        }
+
         .login-button {
           width: 100%;
           height: 48px;