前端验证码

zhanghua

2023-08-15 b28d647a748d0716a86718b58144faac873a8fe2

前端验证码

 src/views/login/SIdentify.vue

New file
@@ -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>
  
  

 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)) {
@@ -106,7 +115,7 @@
        username:"",
        password:"",
      },
      imgUrl:'',
      imgUrl: "",
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
@@ -120,16 +129,16 @@
    };
  },
  created() {
    const pic = JSON.parse(sessionStorage.getItem('pic'));
    const pic = JSON.parse(sessionStorage.getItem("pic"));
    if(pic){
      this.imgUrl = pic.loginPageIconUrl
      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: {
@@ -138,10 +147,16 @@
    },
    ...mapActions(["login"]),
    handleLogin() {
      debugger;
      // 登录函数中验证验证码是否正确：统一转换为小写
      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){
                that.$message({
                  type:'warning',
                  message:response.message
                })
              }
            })
          }
        })
        .catch(function (error) {
                  type: "warning",
                  message: response.message,
        });
    }
            });
          }
        })
        .catch(function (error) {});
    },
    createValidCode(data) {
      this.validCode = data;
    },
  },
};
</script>