From b28d647a748d0716a86718b58144faac873a8fe2 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 15 八月 2023 21:39:04 +0800
Subject: [PATCH] 前端验证码

---
 src/views/login/SIdentify.vue |   98 ++++++++++++++++++++++++++++++++
 src/views/login/index.vue     |   79 ++++++++++++++++----------
 2 files changed, 146 insertions(+), 31 deletions(-)

diff --git a/src/views/login/SIdentify.vue b/src/views/login/SIdentify.vue
new file mode 100644
index 0000000..66e0ec8
--- /dev/null
+++ b/src/views/login/SIdentify.vue
@@ -0,0 +1,98 @@
+<template>
+    <div
+        class="ValidCode disabled-select"
+        :style="`width:${width}; height:${height}`"
+        @click="refreshCode"
+    >
+      <span
+          v-for="(item, index) in codeList"
+          :key="index"
+          :style="getStyle(item)"
+      >{{ item.code }}</span>
+    </div>
+  </template>
+  
+  <script>
+  // 楠岃瘉鐮佺粍浠�
+  export default {
+    name: 'ValidCode',
+    model: {
+      prop: 'value',
+      event: 'input'
+    },
+    props: {
+      width: {
+        type: String,
+        default: '100px'
+      },
+      height: {
+        type: String,
+        default: '40px'
+      },
+      length: {
+        type: Number,
+        default: 4
+      },
+      refresh: {
+        type: Number
+      }
+    },
+    data () {
+      return {
+        codeList: []
+      }
+    },
+    watch: {
+      refresh () {
+        this.createdCode()
+      }
+    },
+    mounted () {
+      this.createdCode()
+    },
+    methods: {
+      refreshCode () {
+        this.createdCode()
+      },
+      createdCode () {
+        const len = this.length
+        const codeList = []
+        const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
+        const charsLen = chars.length
+        // 鐢熸垚
+        for (let i = 0; i < len; i++) {
+          const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
+          codeList.push({
+            code: chars.charAt(Math.floor(Math.random() * charsLen)),
+            color: `rgb(${rgb})`,
+            fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
+            padding: `${[Math.floor(Math.random() * 10)]}px`,
+            transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
+          })
+        }
+        // 鎸囧悜
+        this.codeList = codeList
+        // 灏嗗綋鍓嶆暟鎹淳鍙戝嚭鍘�
+        // console.log(codeList.map(item => item.code).join(''))
+        this.$emit('input', codeList.map(item => item.code).join(''))
+      },
+      getStyle (data) {
+        return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .ValidCode{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .ValidCode span{
+    display: inline-block;
+  }
+  </style>
+  
+  
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 85f76a9..ddb8047 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -60,6 +60,13 @@
             </span>
           </el-input>
         </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="loginForm.validCode"
+            placeholder="楠岃瘉鐮�"
+          ></el-input>
+          <SIdentify @input="createValidCode"></SIdentify>
+        </el-form-item>
         <!-- 琛ㄥ崟鎻愪氦鎸夐挳 -->
         <el-form-item style="margin-bottom: 60px; text-align: center">
           <el-button
@@ -80,12 +87,14 @@
 import { isvalidUsername } from "@/utils/validate";
 import { createNamespacedHelpers } from "vuex";
 import users from "@/api/users";
-import {Decrypt,Encrypt} from '@/utils/cryptojs'
-import leafletMapVue from '../systemSetting/device/grid/components/components/leafletMap.vue';
-
+import { Decrypt, Encrypt } from "@/utils/cryptojs";
+import leafletMapVue from "../systemSetting/device/grid/components/components/leafletMap.vue";
+// 寮曞叆鐧诲綍楠岃瘉缁勪欢
+import SIdentify from "./SIdentify";
 const { mapActions } = createNamespacedHelpers("users");
 export default {
   name: "login",
+  components: { SIdentify },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!isvalidUsername(value)) {
@@ -103,10 +112,10 @@
     };
     return {
       loginForm: {
-        username:"",
-        password:"",
+        username: "",
+        password: "",
       },
-      imgUrl:'',
+      imgUrl: "",
       loginRules: {
         username: [
           { required: true, trigger: "blur", validator: validateUsername },
@@ -120,28 +129,34 @@
     };
   },
   created() {
-    const pic = JSON.parse(sessionStorage.getItem('pic'));
-    if(pic){
-      this.imgUrl = pic.loginPageIconUrl
-    }else{
+    const pic = JSON.parse(sessionStorage.getItem("pic"));
+    if (pic) {
+      this.imgUrl = pic.loginPageIconUrl;
+    } else {
       this.$axios({
-          method: 'get',
-          url: 'sccg/system/portal/logo/search',
-        }).then(res => {
-          this.imgUrl = res.data.loginPageIconUrl
-        })
+        method: "get",
+        url: "sccg/system/portal/logo/search",
+      }).then((res) => {
+        this.imgUrl = res.data.loginPageIconUrl;
+      });
     }
-   },
+  },
   methods: {
     showPwd() {
       this.pwdType = !this.pwdType;
     },
     ...mapActions(["login"]),
     handleLogin() {
+      debugger;
+      // 鐧诲綍鍑芥暟涓獙璇侀獙璇佺爜鏄惁姝g‘锛氱粺涓�杞崲涓哄皬鍐�
+      if (this.loginForm.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
+        this.$message.error("楠岃瘉鐮侀敊璇�");
+        return;
+      }
       let { username, password } = this.loginForm;
       const that = this;
-      
-      password = Encrypt(password)
+
+      password = Encrypt(password);
       this.$axios
         .post("sccg/admin/login", {
           password,
@@ -151,27 +166,29 @@
           if (response.code === 200) {
             // 璁剧疆toke鏃堕棿
             // 淇濆瓨token
-            sessionStorage.setItem('token',response.data.token);
+            sessionStorage.setItem("token", response.data.token);
             // 淇濆瓨token
-            sessionStorage.setItem('tokenHead',response.data.tokenHead);
+            sessionStorage.setItem("tokenHead", response.data.tokenHead);
             // 淇濆瓨鐢ㄦ埛鐧诲綍鍚�
-            sessionStorage.setItem('name',username);
+            sessionStorage.setItem("name", username);
             // 璺宠浆鍒伴椤�
             that.$router.push("/home");
-          }else{
-            that.$refs.loginForm.validate((valid)=>{
-              if(valid){
+          } else {
+            that.$refs.loginForm.validate((valid) => {
+              if (valid) {
                 that.$message({
-                  type:'warning',
-                  message:response.message
-                })
+                  type: "warning",
+                  message: response.message,
+                });
               }
-            })
+            });
           }
         })
-        .catch(function (error) {
-        });
-    }
+        .catch(function (error) {});
+    },
+    createValidCode(data) {
+      this.validCode = data;
+    },
   },
 };
 </script>

--
Gitblit v1.8.0