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