fix:登录实现滑块

package.json

@@ -40,6 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "crypto-js": "4.1.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",

src/api/login.js

@@ -1,12 +1,11 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(username, password, code) {
   const data = {
     username,
     password,
-    code,
+    code
-    uuid
   }
   return request({
     url: '/login',
@@ -47,14 +46,10 @@ export function logout() {
   })
 }
 
-// 获取验证码
+// 获取验证码开关
-export function getCodeImg() {
+export function isCaptchaEnabled() {
   return request({
-    url: '/captchaImage',
+    url: '/captchaEnabled',
-    headers: {
+    method: 'get'
-      isToken: false
-    },
-    method: 'get',
-    timeout: 20000
   })
-}
+}

src/components/Verifition/Verify/VerifyPoints.vue

@@ -0,0 +1,290 @@
+<template>
+  <div style="position: relative">
+    <div class="verify-img-out">
+      <div
+        class="verify-img-panel"
+        :style="{
+          width: setSize.imgWidth,
+          height: setSize.imgHeight,
+          'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
+          'margin-bottom': vSpace + 'px',
+        }"
+      >
+        <div
+          class="verify-refresh"
+          style="z-index: 3"
+          @click="refresh"
+          v-show="showRefresh"
+        >
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <img
+          :src="
+            pointBackImgBase
+              ? 'data:image/png;base64,' + pointBackImgBase
+              : defaultImg
+          "
+          ref="canvas"
+          alt=""
+          style="width: 100%; height: 100%; display: block"
+          @click="bindingClick ? canvasClick($event) : undefined"
+        />
+
+        <div
+          v-for="(tempPoint, index) in tempPoints"
+          :key="index"
+          class="point-area"
+          :style="{
+            'background-color': '#1abd6c',
+            color: '#fff',
+            'z-index': 9999,
+            width: '20px',
+            height: '20px',
+            'text-align': 'center',
+            'line-height': '20px',
+            'border-radius': '50%',
+            position: 'absolute',
+            top: parseInt(tempPoint.y - 10) + 'px',
+            left: parseInt(tempPoint.x - 10) + 'px',
+          }"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+    <!-- 'height': this.barSize.height, -->
+    <div
+      class="verify-bar-area"
+      :style="{
+        width: setSize.imgWidth,
+        color: this.barAreaColor,
+        'border-color': this.barAreaBorderColor,
+        'line-height': this.barSize.height,
+      }"
+    >
+      <span class="verify-msg">{{ text }}</span>
+    </div>
+  </div>
+</template>
+<script type="text/babel">
+/**
+ * VerifyPoints
+ * @description 点选
+ * */
+import {
+  resetSize,
+  _code_chars,
+  _code_color1,
+  _code_color2,
+} from "./../utils/util";
+import { aesEncrypt } from "./../utils/ase";
+import { reqGet, reqCheck } from "./../api/index";
+
+export default {
+  name: "VerifyPoints",
+  props: {
+    //弹出式pop，固定fixed
+    mode: {
+      type: String,
+      default: "fixed",
+    },
+    captchaType: {
+      type: String,
+    },
+    //间隔
+    vSpace: {
+      type: Number,
+      default: 5,
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "155px",
+        };
+      },
+    },
+    barSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "40px",
+        };
+      },
+    },
+    defaultImg: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      secretKey: "", //后端返回的ase加密秘钥
+      checkNum: 3, //默认需要点击的字数
+      fontPos: [], //选中的坐标信息
+      checkPosArr: [], //用户点击的坐标
+      num: 1, //点击的记数
+      pointBackImgBase: "", //后端获取到的背景图片
+      poinTextList: [], //后端返回的点击字体顺序
+      backToken: "", //后端返回的token值
+      setSize: {
+        imgHeight: 0,
+        imgWidth: 0,
+        barHeight: 0,
+        barWidth: 0,
+      },
+      tempPoints: [],
+      text: "",
+      barAreaColor: undefined,
+      barAreaBorderColor: undefined,
+      showRefresh: true,
+      bindingClick: true,
+    };
+  },
+  computed: {
+    resetSize() {
+      return resetSize;
+    },
+  },
+  methods: {
+    init() {
+      //加载页面
+      this.fontPos.splice(0, this.fontPos.length);
+      this.checkPosArr.splice(0, this.checkPosArr.length);
+      this.num = 1;
+      this.getPictrue();
+      this.$nextTick(() => {
+        this.setSize = this.resetSize(this); //重新设置宽度高度
+        this.$parent.$emit("ready", this);
+      });
+    },
+    canvasClick(e) {
+      this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
+      if (this.num == this.checkNum) {
+        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+        //按比例转换坐标值
+        this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize);
+        //等创建坐标执行完
+        setTimeout(() => {
+          // var flag = this.comparePos(this.fontPos, this.checkPosArr);
+          //发送后端请求
+          var captchaVerification = this.secretKey
+            ? aesEncrypt(
+                this.backToken + "---" + JSON.stringify(this.checkPosArr),
+                this.secretKey
+              )
+            : this.backToken + "---" + JSON.stringify(this.checkPosArr);
+          let data = {
+            captchaType: this.captchaType,
+            pointJson: this.secretKey
+              ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey)
+              : JSON.stringify(this.checkPosArr),
+            token: this.backToken,
+          };
+          reqCheck(data).then((res) => {
+            if (res.repCode == "0000") {
+              this.barAreaColor = "#4cae4c";
+              this.barAreaBorderColor = "#5cb85c";
+              this.text = "验证成功";
+              this.bindingClick = false;
+              if (this.mode == "pop") {
+                setTimeout(() => {
+                  this.$parent.clickShow = false;
+                  this.refresh();
+                }, 1500);
+              }
+              this.$parent.$emit("success", { captchaVerification });
+            } else {
+              this.$parent.$emit("error", this);
+              this.barAreaColor = "#d9534f";
+              this.barAreaBorderColor = "#d9534f";
+              this.text = "验证失败";
+              setTimeout(() => {
+                this.refresh();
+              }, 700);
+            }
+          });
+        }, 400);
+      }
+      if (this.num < this.checkNum) {
+        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
+      }
+    },
+
+    //获取坐标
+    getMousePos: function (obj, e) {
+      var x = e.offsetX;
+      var y = e.offsetY;
+      return { x, y };
+    },
+    //创建坐标点
+    createPoint: function (pos) {
+      this.tempPoints.push(Object.assign({}, pos));
+      return ++this.num;
+    },
+    refresh: function () {
+      this.tempPoints.splice(0, this.tempPoints.length);
+      this.barAreaColor = "#000";
+      this.barAreaBorderColor = "#ddd";
+      this.bindingClick = true;
+      this.fontPos.splice(0, this.fontPos.length);
+      this.checkPosArr.splice(0, this.checkPosArr.length);
+      this.num = 1;
+      this.getPictrue();
+      this.text = "验证失败";
+      this.showRefresh = true;
+    },
+
+    // 请求背景图片和验证图片
+    getPictrue() {
+      let data = {
+        captchaType: this.captchaType,
+        clientUid: localStorage.getItem("point"),
+        ts: Date.now(), // 现在的时间戳
+      };
+      reqGet(data).then((res) => {
+        if (res.repCode == "0000") {
+          this.pointBackImgBase = res.repData.originalImageBase64;
+          this.backToken = res.repData.token;
+          this.secretKey = res.repData.secretKey;
+          this.poinTextList = res.repData.wordList;
+          this.text = "请依次点击【" + this.poinTextList.join(",") + "】";
+        } else {
+          this.text = res.repMsg;
+        }
+
+        // 判断接口请求次数是否失效
+        if (res.repCode == "6201") {
+          this.pointBackImgBase = null;
+        }
+      });
+    },
+    //坐标转换函数
+    pointTransfrom(pointArr, imgSize) {
+      var newPointArr = pointArr.map((p) => {
+        let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth));
+        let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight));
+        return { x, y };
+      });
+      return newPointArr;
+    },
+  },
+  watch: {
+    // type变化则全面刷新
+    type: {
+      immediate: true,
+      handler() {
+        this.init();
+      },
+    },
+  },
+  mounted() {
+    // 禁止拖拽
+    this.$el.onselectstart = function () {
+      return false;
+    };
+  },
+};
+</script>

src/components/Verifition/Verify/VerifySlide.vue

@@ -0,0 +1,433 @@
+<template>
+  <div style="position: relative">
+    <div
+      v-if="type === '2'"
+      class="verify-img-out"
+      :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"
+    >
+      <div
+        class="verify-img-panel"
+        :style="{ width: setSize.imgWidth, height: setSize.imgHeight }"
+      >
+        <img
+          :src="
+            backImgBase ? 'data:image/png;base64,' + backImgBase : defaultImg
+          "
+          alt=""
+          style="width: 100%; height: 100%; display: block"
+        />
+        <div class="verify-refresh" @click="refresh" v-show="showRefresh">
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <transition name="tips">
+          <span
+            class="verify-tips"
+            v-if="tipWords"
+            :class="passFlag ? 'suc-bg' : 'err-bg'"
+            >{{ tipWords }}</span
+          >
+        </transition>
+      </div>
+    </div>
+    <!-- 公共部分 -->
+    <div
+      class="verify-bar-area"
+      :style="{
+        width: setSize.imgWidth,
+        height: barSize.height,
+        'line-height': barSize.height,
+      }"
+    >
+      <span class="verify-msg" v-text="text"></span>
+      <div
+        class="verify-left-bar"
+        :style="{
+          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
+          height: barSize.height,
+          'border-color': leftBarBorderColor,
+          transaction: transitionWidth,
+        }"
+      >
+        <span class="verify-msg" v-text="finishText"></span>
+        <div
+          class="verify-move-block"
+          @touchstart="start"
+          @mousedown="start"
+          :style="{
+            width: barSize.height,
+            height: barSize.height,
+            'background-color': moveBlockBackgroundColor,
+            left: moveBlockLeft,
+            transition: transitionLeft,
+          }"
+        >
+          <i
+            :class="['verify-icon iconfont', iconClass]"
+            :style="{ color: iconColor }"
+          ></i>
+          <div
+            v-if="type === '2'"
+            class="verify-sub-block"
+            :style="{
+              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
+              height: setSize.imgHeight,
+              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
+              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
+            }"
+          >
+            <img
+              :src="'data:image/png;base64,' + blockBackImgBase"
+              alt=""
+              style="width: 100%; height: 100%; display: block"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/babel">
+/**
+ * VerifySlide
+ * @description 滑块
+ * */
+import { aesEncrypt } from "./../utils/ase";
+import { resetSize } from "./../utils/util";
+import { reqGet, reqCheck } from "./../api/index";
+
+//  "captchaType":"blockPuzzle",
+export default {
+  name: "VerifySlide",
+  props: {
+    captchaType: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "1",
+    },
+    //弹出式pop，固定fixed
+    mode: {
+      type: String,
+      default: "fixed",
+    },
+    vSpace: {
+      type: Number,
+      default: 5,
+    },
+    explain: {
+      type: String,
+      default: "向右滑动完成验证",
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "155px",
+        };
+      },
+    },
+    blockSize: {
+      type: Object,
+      default() {
+        return {
+          width: "50px",
+          height: "50px",
+        };
+      },
+    },
+    barSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "40px",
+        };
+      },
+    },
+    defaultImg: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      secretKey: "", //后端返回的加密秘钥 字段
+      passFlag: "", //是否通过的标识
+      backImgBase: "", //验证码背景图片
+      blockBackImgBase: "", //验证滑块的背景图片
+      backToken: "", //后端返回的唯一token值
+      startMoveTime: "", //移动开始的时间
+      endMovetime: "", //移动结束的时间
+      tipsBackColor: "", //提示词的背景颜色
+      tipWords: "",
+      text: "",
+      finishText: "",
+      setSize: {
+        imgHeight: 0,
+        imgWidth: 0,
+        barHeight: 0,
+        barWidth: 0,
+      },
+      top: 0,
+      left: 0,
+      moveBlockLeft: undefined,
+      leftBarWidth: undefined,
+      // 移动中样式
+      moveBlockBackgroundColor: undefined,
+      leftBarBorderColor: "#ddd",
+      iconColor: undefined,
+      iconClass: "icon-right",
+      status: false, //鼠标状态
+      isEnd: false, //是够验证完成
+      showRefresh: true,
+      transitionLeft: "",
+      transitionWidth: "",
+    };
+  },
+  computed: {
+    barArea() {
+      return this.$el.querySelector(".verify-bar-area");
+    },
+    resetSize() {
+      return resetSize;
+    },
+  },
+  methods: {
+    init() {
+      this.text = this.explain;
+      this.getPictrue();
+      this.$nextTick(() => {
+        let setSize = this.resetSize(this); //重新设置宽度高度
+        for (let key in setSize) {
+          this.$set(this.setSize, key, setSize[key]);
+        }
+        this.$parent.$emit("ready", this);
+      });
+
+      var _this = this;
+
+      window.removeEventListener("touchmove", function (e) {
+        _this.move(e);
+      });
+      window.removeEventListener("mousemove", function (e) {
+        _this.move(e);
+      });
+
+      //鼠标松开
+      window.removeEventListener("touchend", function () {
+        _this.end();
+      });
+      window.removeEventListener("mouseup", function () {
+        _this.end();
+      });
+
+      window.addEventListener("touchmove", function (e) {
+        _this.move(e);
+      });
+      window.addEventListener("mousemove", function (e) {
+        _this.move(e);
+      });
+
+      //鼠标松开
+      window.addEventListener("touchend", function () {
+        _this.end();
+      });
+      window.addEventListener("mouseup", function () {
+        _this.end();
+      });
+    },
+
+    //鼠标按下
+    start: function (e) {
+      e = e || window.event;
+      if (!e.touches) {
+        //兼容PC端
+        var x = e.clientX;
+      } else {
+        //兼容移动端
+        var x = e.touches[0].pageX;
+      }
+      this.startLeft = Math.floor(
+        x - this.barArea.getBoundingClientRect().left
+      );
+      this.startMoveTime = +new Date(); //开始滑动的时间
+      if (this.isEnd == false) {
+        this.text = "";
+        this.moveBlockBackgroundColor = "#337ab7";
+        this.leftBarBorderColor = "#337AB7";
+        this.iconColor = "#fff";
+        e.stopPropagation();
+        this.status = true;
+      }
+    },
+    //鼠标移动
+    move: function (e) {
+      e = e || window.event;
+      if (this.status && this.isEnd == false) {
+        if (!e.touches) {
+          //兼容PC端
+          var x = e.clientX;
+        } else {
+          //兼容移动端
+          var x = e.touches[0].pageX;
+        }
+        var bar_area_left = this.barArea.getBoundingClientRect().left;
+        var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
+        if (
+          move_block_left >=
+          this.barArea.offsetWidth -
+            parseInt(parseInt(this.blockSize.width) / 2) -
+            2
+        ) {
+          move_block_left =
+            this.barArea.offsetWidth -
+            parseInt(parseInt(this.blockSize.width) / 2) -
+            2;
+        }
+        if (move_block_left <= 0) {
+          move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
+        }
+        //拖动后小方块的left值
+        this.moveBlockLeft = move_block_left - this.startLeft + "px";
+        this.leftBarWidth = move_block_left - this.startLeft + "px";
+      }
+    },
+
+    //鼠标松开
+    end: function () {
+      this.endMovetime = +new Date();
+      var _this = this;
+      //判断是否重合
+      if (this.status && this.isEnd == false) {
+        var moveLeftDistance = parseInt(
+          (this.moveBlockLeft || "").replace("px", "")
+        );
+        moveLeftDistance =
+          (moveLeftDistance * 310) / parseInt(this.setSize.imgWidth);
+        let data = {
+          captchaType: this.captchaType,
+          pointJson: this.secretKey
+            ? aesEncrypt(
+                JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+                this.secretKey
+              )
+            : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+          token: this.backToken,
+        };
+        reqCheck(data).then((res) => {
+          if (res.repCode == "0000") {
+            this.moveBlockBackgroundColor = "#5cb85c";
+            this.leftBarBorderColor = "#5cb85c";
+            this.iconColor = "#fff";
+            this.iconClass = "icon-check";
+            this.showRefresh = false;
+            this.isEnd = true;
+            this.passFlag = true;
+            this.tipWords = `${(
+              (this.endMovetime - this.startMoveTime) /
+              1000
+            ).toFixed(2)}s验证成功`;
+            var captchaVerification = this.secretKey
+              ? aesEncrypt(
+                  this.backToken +
+                    "---" +
+                    JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+                  this.secretKey
+                )
+              : this.backToken +
+                "---" +
+                JSON.stringify({ x: moveLeftDistance, y: 5.0 });
+            setTimeout(() => {
+              this.tipWords = "";
+              this.$parent.closeBox();
+              this.$parent.$emit("success", { captchaVerification });
+            }, 1000);
+          } else {
+            this.moveBlockBackgroundColor = "#d9534f";
+            this.leftBarBorderColor = "#d9534f";
+            this.iconColor = "#fff";
+            this.iconClass = "icon-close";
+            this.passFlag = false;
+            setTimeout(function () {
+              _this.refresh();
+            }, 1000);
+            this.$parent.$emit("error", this);
+            this.tipWords = "验证失败";
+            setTimeout(() => {
+              this.tipWords = "";
+            }, 1000);
+          }
+        });
+        this.status = false;
+      }
+    },
+
+    refresh: function () {
+      this.showRefresh = true;
+      this.finishText = "";
+
+      this.transitionLeft = "left .3s";
+      this.moveBlockLeft = 0;
+
+      this.leftBarWidth = undefined;
+      this.transitionWidth = "width .3s";
+
+      this.leftBarBorderColor = "#ddd";
+      this.moveBlockBackgroundColor = "#fff";
+      this.iconColor = "#000";
+      this.iconClass = "icon-right";
+      this.isEnd = false;
+
+      this.getPictrue();
+      setTimeout(() => {
+        this.transitionWidth = "";
+        this.transitionLeft = "";
+        this.text = this.explain;
+      }, 300);
+    },
+
+    // 请求背景图片和验证图片
+    getPictrue() {
+      let data = {
+        captchaType: this.captchaType,
+        clientUid: localStorage.getItem("slider"),
+        ts: Date.now(), // 现在的时间戳
+      };
+      reqGet(data).then((res) => {
+        if (res.repCode == "0000") {
+          this.backImgBase = res.repData.originalImageBase64;
+          this.blockBackImgBase = res.repData.jigsawImageBase64;
+          this.backToken = res.repData.token;
+          this.secretKey = res.repData.secretKey;
+        } else {
+          this.tipWords = res.repMsg;
+        }
+
+        // 判断接口请求次数是否失效
+        if (res.repCode == "6201") {
+          this.backImgBase = null;
+          this.blockBackImgBase = null;
+        }
+      });
+    },
+  },
+  watch: {
+    // type变化则全面刷新
+    type: {
+      immediate: true,
+      handler() {
+        this.init();
+      },
+    },
+  },
+  mounted() {
+    // 禁止拖拽
+    this.$el.onselectstart = function () {
+      return false;
+    };
+  },
+};
+</script>
+

src/components/Verifition/api/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+//获取验证图片
+export function reqGet(data) {
+    return request({
+        url: '/captcha/get',
+        method: 'post',
+        data
+    })
+}
+
+//滑动或者点选验证
+export function reqCheck(data) {
+    return request({
+        url: '/captcha/check',
+        method: 'post',
+        data
+    })
+}

src/components/Verifition/utils/ase.js

@@ -0,0 +1,11 @@
+import CryptoJS from 'crypto-js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word, keyWord = "XwKsGlMcdPMEhR1B") {
+  var key = CryptoJS.enc.Utf8.parse(keyWord);
+  var srcs = CryptoJS.enc.Utf8.parse(word);
+  var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
+  return encrypted.toString();
+}

src/components/Verifition/utils/util.js

@@ -0,0 +1,36 @@
+export function resetSize(vm) {
+    var img_width, img_height, bar_width, bar_height;	//图片的宽度、高度，移动条的宽度、高度
+
+    var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
+    var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
+
+    if (vm.imgSize.width.indexOf('%') != -1) {
+        img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
+    } else {
+        img_width = this.imgSize.width;
+    }
+
+    if (vm.imgSize.height.indexOf('%') != -1) {
+        img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
+    } else {
+        img_height = this.imgSize.height
+    }
+
+    if (vm.barSize.width.indexOf('%') != -1) {
+        bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
+    } else {
+        bar_width = this.barSize.width
+    }
+
+    if (vm.barSize.height.indexOf('%') != -1) {
+        bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
+    } else {
+        bar_height = this.barSize.height
+    }
+
+    return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
+}
+
+export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
+export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

src/store/modules/user.js

@@ -38,9 +38,8 @@ const user = {
       const username = userInfo.username.trim()
       const password = userInfo.password
       const code = userInfo.code
-      const uuid = userInfo.uuid
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()
@@ -50,6 +49,7 @@ const user = {
       })
     },
 
+
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {

src/views/login.vue

@@ -23,20 +23,13 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <Verify
-        <el-input
+        @success="capctchaCheckSuccess"
-          v-model="loginForm.code"
+        :mode="'pop'"
-          auto-complete="off"
+        :captchaType="'blockPuzzle'"
-          placeholder="验证码"
+        :imgSize="{ width: '330px', height: '155px' }"
-          style="width: 63%"
+        ref="verify"
-          @keyup.enter.native="handleLogin"
+      ></Verify>
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
@@ -62,21 +55,20 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import Verify from "@/components/Verifition/Verify";
 
 export default {
+  components: { Verify },
   name: "Login",
   data() {
     return {
-      codeUrl: "",
       loginForm: {
         username: "",
         password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
       },
       loginRules: {
         username: [
@@ -85,11 +77,8 @@ export default {
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
       loading: false,
-      // 验证码开关
-      captchaEnabled: true,
       // 注册开关
       register: true,
       redirect: undefined
@@ -104,54 +93,45 @@ export default {
     }
   },
   created() {
-    this.getCode();
     this.getCookie();
   },
   methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
-        }
-      });
-    },
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
+    capctchaCheckSuccess(params) {
+      this.loginForm.code = params.captchaVerification;
+      this.loading = true;
+      if (this.loginForm.rememberMe) {
+        Cookies.set("username", this.loginForm.username, { expires: 30 });
+        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30, });
+        Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+      } else {
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      this.$store.dispatch("Login", this.loginForm).then(() => {
+        this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.$refs.verify.show();
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
-          } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
         }
       });
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -192,15 +172,6 @@ export default {
   text-align: center;
   color: #bfbfbf;
 }
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -213,7 +184,4 @@ export default {
   font-size: 12px;
   letter-spacing: 1px;
 }
-.login-code-img {
-  height: 38px;
-}
 </style>

src/views/register.vue

@@ -39,7 +39,7 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+<!--      <el-form-item prop="code" v-if="captchaEnabled">
         <el-input
           v-model="registerForm.code"
           auto-complete="off"
@@ -52,7 +52,7 @@
         <div class="register-code">
           <img :src="codeUrl" @click="getCode" class="register-code-img"/>
         </div>
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
@@ -114,7 +114,7 @@ export default {
           { required: true, trigger: "blur", message: "请再次输入您的密码" },
           { required: true, validator: equalToPassword, trigger: "blur" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+       // code: [{ required: true, trigger: "change", message: "请输入验证码" }],
         roleKey: [{ required: true, trigger: "change", message: "请选择申报类型" }]
       },
       loading: false,