登录添加验证码验证

shanXiPlatform/src/api/user.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2020-12-17 13:59:37
- * @LastEditTime: 2021-03-29 14:44:39
+ * @LastEditTime: 2021-04-06 10:28:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edity
  * @FilePath: \csc-szls-vue\shanXiPlatform\src\api\user.js
@@ -38,7 +38,15 @@ export function captcha() {
     method: 'get'
   })
 }
-
+// 验证码验证
+///public/verifyCode
+export function verifyCaptcha(params) {
+  return request({
+    url: '/csc-szls-system-manage/public/verifyCode',
+    method: 'get',
+    params
+  })
+}
 
 
 //用户字典列表

shanXiPlatform/src/views/login/index.vue

@@ -65,10 +65,7 @@
                   name="password"
                   tabindex="2"
                   autocomplete="off"
-                  @keyup.native="checkCapslock"
-                  @blur="capsTooltip = false"
                   @keyup.enter.native="handleLogin()"
-
                 />
                 <span class="show-pwd" @click="showPwd">
                   <svg-icon
@@ -81,19 +78,24 @@
             </el-tooltip>
 
             <!-- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> -->
-           <!--  <el-form-item prop="validationCode" class="captchDiv">
-              
+            <el-form-item prop="captchaCode" class="captchDiv">
               <el-input
-                ref="validationCode"
-                v-model="loginForm.validationCode"
+                ref="captchaCode"
+                v-model="loginForm.captchaCode"
                 placeholder="验证码"
-                name="validationCode"
+                name="captchaCode"
                 type="text"
-                tabindex="1"
+                tabindex="3"
+                @blur="validationCaptcha()"
                 class="validationCode"
               />
-              <img :src="captcha" alt="验证码" class="captchImg">
-            </el-form-item> -->
+              <img
+                :src="captcha"
+                alt="验证码"
+                class="captchImg"
+                @click="getCaptcha()"
+              />
+            </el-form-item>
             <el-button
               :loading="loading"
               type="primary"
@@ -134,7 +136,16 @@
 <script>
 // import { validUsername } from "@/utils/validate"
 import SocialSign from "./components/SocialSignin"
-import { login, deportDic, hourseDic, personDic, departDic ,sidebarPermission, captcha} from "@/api/user"
+import {
+  login,
+  deportDic,
+  hourseDic,
+  personDic,
+  departDic,
+  sidebarPermission,
+  captcha,
+  verifyCaptcha
+} from "@/api/user"
 import {
   getToken,
   setToken,
@@ -156,8 +167,19 @@ export default {
       }
     }
     const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error("密码输入错误"))
+      if (value !== "" && value.length < 6) {
+        callback(new Error("密码输入错误！"))
+      } else if (value === "") {
+        callback(new Error("请输入密码！"))
+      } else {
+        callback()
+      }
+    }
+    const validateCaptcha = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入验证码!"))
+      } else if (value.length != 5) {
+        callback(new Error("验证码输入错误"))
       } else {
         callback()
       }
@@ -166,7 +188,7 @@ export default {
       loginForm: {
         username: "",
         password: "",
-        validationCode:""
+        captchaCode: "" //验证码输入
       },
       loginRules: {
         username: [
@@ -177,17 +199,21 @@ export default {
         password: [
           { required: true, trigger: "blur", validator: validatePassword }
         ],
-        // validationCode:[
-        //   { required: true, trigger: "blur", validator: validationCode }
-        // ]
+        captchaCode: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { validator: validateCaptcha, trigger: "blur" }
+        ]
       },
       // disabled:true,
+
+      key: "", //验证码绑定key
+      flag: false,
       passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
-      captcha:'',
+      captcha: "",
       otherQuery: {}
     }
   },
@@ -211,7 +237,9 @@ export default {
       this.$refs.username.focus()
     } else if (this.loginForm.password === "") {
       this.$refs.password.focus()
-    }
+    } /* else if (this.validationCode === '') {
+      this.$refs.validationCode.focus()
+    } */
     this.getCaptcha()
   },
   destroyed() {
@@ -234,15 +262,37 @@ export default {
     },
     // 获取验证码
     getCaptcha() {
-      captcha().then(res =>{
-        if(res.code ==200){
-          // this.loginForm.validationCode = res.data
-          this.captcha = res.data.image
-          console.log(res,'获取验证码成功')
-        }
-      }).catch(err =>{
-        console.log(err)
-      })
+      captcha()
+        .then(res => {
+          if (res.code == 200) {
+            // this.validationCode = res.data
+            this.captcha = res.data.image
+            this.key = res.data.key
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    // 验证码验证
+    validationCaptcha() {
+      let params = {
+        key: this.key,
+        verCode: this.loginForm.captchaCode
+      }
+      verifyCaptcha(params)
+        .then(res => {
+          if (res.code == 200) {
+            this.flag = true
+          } else {
+            this.flag = false
+
+            this.getCaptcha()
+          }
+        })
+        .catch(err => {
+          console.log(err, "err验证码")
+        })
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
@@ -252,113 +302,124 @@ export default {
             uName: this.loginForm.username,
             uPassword: this.loginForm.password
           }
-          login(loginInfo)
-            .then(res => {
-              if (res.code == 200) {
-                this.$message({
-                  message: "登录成功",
-                  type: "success"
-                })
-                localStorage.setItem("userInfo", JSON.stringify(res.data.user))
-                // console.log(res.data.user.homeType, "homeType")
-                var Authorization =
-                  res.data.tokenInfo.token_type +
-                  " " +
-                  res.data.tokenInfo.access_token
-                setToken(Authorization)
-                setUser(res.data.user)
-
-                this.getDeportDic()
-                this.getHourseDic()
-                this.getPersonDic()
-                this.getDepartDic()
-                this.getpermission(res.data.user.homeType)
-                this.$store.state.isAuthority = true
-                this.depotId = res.data.user.depotId
-                this.$store.commit({
-                  type: "changeDepartmentName",
-                  departmentName: res.data.user.departmentName
-                })
-
-                this.$store.commit({
-                  type: "changeppost",
-                  ppost: res.data.user.ppost
-                })
-
-                this.$store.commit({
-                  type: "changeDepotId",
-                  depotId: res.data.user.depotId
-                })
-
-                this.$store.commit({
-                  type: "changeDepotName",
-                  depotName: res.data.user.depotName
-                })
-                if (
-                  res.data.user.storehouseIds &&
-                  res.data.user.storehouseIds.length > 0
-                ) {
+          if (this.flag) {
+            login(loginInfo)
+              .then(res => {
+                if (res.code == 200) {
+                  this.$message({
+                    message: "登录成功",
+                    type: "success"
+                  })
+                  localStorage.setItem(
+                    "userInfo",
+                    JSON.stringify(res.data.user)
+                  )
+                  // console.log(res.data.user.homeType, "homeType")
+                  var Authorization =
+                    res.data.tokenInfo.token_type +
+                    " " +
+                    res.data.tokenInfo.access_token
+                  setToken(Authorization)
+                  setUser(res.data.user)
+
+                  this.getDeportDic()
+                  this.getHourseDic()
+                  this.getPersonDic()
+                  this.getDepartDic()
+                  this.getpermission(res.data.user.homeType)
+                  this.$store.state.isAuthority = true
+                  this.depotId = res.data.user.depotId
                   this.$store.commit({
-                    type: "changeHouseId",
-                    houseId: res.data.user.storehouseIds.split(",")[0]
+                    type: "changeDepartmentName",
+                    departmentName: res.data.user.departmentName
                   })
-                }
-                if (
-                  res.data.user.storehouseNames &&
-                  res.data.user.storehouseNames.length > 0
-                ) {
+
                   this.$store.commit({
-                    type: "changeHouseName",
-                    houseName: res.data.user.storehouseNames.split(",")[0]
+                    type: "changeppost",
+                    ppost: res.data.user.ppost
                   })
-                }
-                this.$store.commit({
-                  type: "changeuId",
-                  uid: res.data.user.uid
-                })
-                // sessionStorage.setItem(
-                //   "store",
-                //   JSON.stringify(this.$store.state)
-                // )
-                //把用户信息存入缓存
-                // console.log(res.data.user.depotId, "5665564433224556533")
-                // console.log(res.data.user.homeType,"查看用户类型，1-分公司首页，2-库及以上领导首页，3-员工首页" )
-                // if (res.data.user.homeType === 1) {
-                //   // 跳转分公司首页
-                //   this.$router.push({ path: "/dashboard/dashboard" })
-                //   // this.$router.push({path:'daiban'})
-                //   // this.$router.push({ path: "/" })
-                // } else if (res.data.user.homeType === 2) {
-                //   // 跳转库及以上领导首页
-                //   this.$router.push({ path: "/dashboard/dashboard" })
-                //   // this.$router.push({ path: "/" })
-                // } else {
-                //   // 跳转员工首页（当前员工首页未定，暂跳转待办页）
-                //   // this.$router.push({ path: "daiban" })
-                //   this.$router.push({ path: "/home" })
-                // }
-
-                /* if (res.data.user.depotId == 1) {
+
+                  this.$store.commit({
+                    type: "changeDepotId",
+                    depotId: res.data.user.depotId
+                  })
+
+                  this.$store.commit({
+                    type: "changeDepotName",
+                    depotName: res.data.user.depotName
+                  })
+                  if (
+                    res.data.user.storehouseIds &&
+                    res.data.user.storehouseIds.length > 0
+                  ) {
+                    this.$store.commit({
+                      type: "changeHouseId",
+                      houseId: res.data.user.storehouseIds.split(",")[0]
+                    })
+                  }
+                  if (
+                    res.data.user.storehouseNames &&
+                    res.data.user.storehouseNames.length > 0
+                  ) {
+                    this.$store.commit({
+                      type: "changeHouseName",
+                      houseName: res.data.user.storehouseNames.split(",")[0]
+                    })
+                  }
+                  this.$store.commit({
+                    type: "changeuId",
+                    uid: res.data.user.uid
+                  })
+                  // sessionStorage.setItem(
+                  //   "store",
+                  //   JSON.stringify(this.$store.state)
+                  // )
+                  //把用户信息存入缓存
+                  // console.log(res.data.user.depotId, "5665564433224556533")
+                  // console.log(res.data.user.homeType,"查看用户类型，1-分公司首页，2-库及以上领导首页，3-员工首页" )
+                  // if (res.data.user.homeType === 1) {
+                  //   // 跳转分公司首页
+                  //   this.$router.push({ path: "/dashboard/dashboard" })
+                  //   // this.$router.push({path:'daiban'})
+                  //   // this.$router.push({ path: "/" })
+                  // } else if (res.data.user.homeType === 2) {
+                  //   // 跳转库及以上领导首页
+                  //   this.$router.push({ path: "/dashboard/dashboard" })
+                  //   // this.$router.push({ path: "/" })
+                  // } else {
+                  //   // 跳转员工首页（当前员工首页未定，暂跳转待办页）
+                  //   // this.$router.push({ path: "daiban" })
+                  //   this.$router.push({ path: "/home" })
+                  // }
+
+                  /* if (res.data.user.depotId == 1) {
                   this.$router.push({ path: "/dashboard" })
                 } else {
                   this.$router.push({ path: "/" })
 
                 } */
-                this.getStateAll()
-              } else {
+                  this.getStateAll()
+                } else {
+                  this.loading = false
+                  // console.log(res.msg, "res.mag...")
+                  this.$message({
+                    message: res.msg,
+                    type: "error"
+                  })
+                }
+              })
+              .catch(err => {
+                // console.log(err,'err信息')
+                console.log(err)
                 this.loading = false
-                // console.log(res.msg, "res.mag...")
-                this.$message({
-                  message: res.msg,
-                  type: "error"
-                })
-              }
-            })
-            .catch(err => {
-              // console.log(err,'err信息')
-              // console.log(err.msg)
-              this.loading = false
+              })
+          } else {
+            this.loading = false
+            this.$message({
+              message: "验证码错误，请重新输入",
+              type: "err"
             })
+          }
         } else {
           console.log("error submit!!")
           return false
@@ -369,7 +430,6 @@ export default {
     getDeportDic() {
       deportDic()
         .then(res => {
-          console.log(res, "mmmmmmm")
           if (res.code == 200) {
             // this.deportDic=res.data;
             localStorage.setItem("deportDic", JSON.stringify(res.data))
@@ -383,7 +443,7 @@ export default {
     getHourseDic() {
       hourseDic()
         .then(res => {
-          console.log(res, "仓房")
+          // console.log(res, "仓房")
           if (res.code == 200) {
             // this.deportDic=res.data;
             localStorage.setItem("hourseDic", JSON.stringify(res.data))
@@ -401,7 +461,7 @@ export default {
       // }
       personDic()
         .then(res => {
-          console.log(res, "人员")
+          // console.log(res, "人员")
           if (res.code == 200) {
             // this.deportDic=res.data;
             localStorage.setItem("perList", JSON.stringify(res.data))
@@ -415,7 +475,7 @@ export default {
     getDepartDic() {
       departDic()
         .then(res => {
-          console.log(res, "mmmmmmm")
+          // console.log(res, "mmmmmmm")
           if (res.code == 200) {
             // this.deportDic=res.data;
             localStorage.setItem("departDic", JSON.stringify(res.data))
@@ -474,40 +534,38 @@ export default {
     //   }
     // }
 
-    getpermission(homeType){
-
-      var userInfo= JSON.parse(localStorage.getItem("userInfo"));
-      console.log(userInfo,"当前用户信息")
-      var params={
-        id:userInfo.roleIds
+    getpermission(homeType) {
+      var userInfo = JSON.parse(localStorage.getItem("userInfo"))
+      // console.log(userInfo,"当前用户信息")
+      var params = {
+        id: userInfo.roleIds
       }
       sidebarPermission(params)
-      .then(res=>{
-        if(res.code == 200){
-
-             var permissions = res.data;
-             console.log(permissions,"当前用户权限。。。。。。")
-
-            localStorage.setItem("permission",JSON.stringify(permissions));
-             if (homeType === 1) {
-                  // 跳转分公司首页
-                  this.$router.push({ path: "/dashboard/dashboard" })
-                  // this.$router.push({path:'daiban'})
-                  // this.$router.push({ path: "/" })
-                } else if (homeType === 2) {
-                  // 跳转库及以上领导首页
-                  this.$router.push({ path: "/dashboard/dashboard" })
-                  // this.$router.push({ path: "/" })
-                } else {
-                  // 跳转员工首页（当前员工首页未定，暂跳转待办页）
-                  // this.$router.push({ path: "daiban" })
-                  this.$router.push({ path: "/home" })
-                }
-        }
-      })
-      .catch(err=>{
-        console.log(err)
-      })
+        .then(res => {
+          if (res.code == 200) {
+            var permissions = res.data
+            //  console.log(permissions,"当前用户权限。。。。。。")
+
+            localStorage.setItem("permission", JSON.stringify(permissions))
+            if (homeType === 1) {
+              // 跳转分公司首页
+              this.$router.push({ path: "/dashboard/dashboard" })
+              // this.$router.push({path:'daiban'})
+              // this.$router.push({ path: "/" })
+            } else if (homeType === 2) {
+              // 跳转库及以上领导首页
+              this.$router.push({ path: "/dashboard/dashboard" })
+              // this.$router.push({ path: "/" })
+            } else {
+              // 跳转员工首页（当前员工首页未定，暂跳转待办页）
+              // this.$router.push({ path: "daiban" })
+              this.$router.push({ path: "/home" })
+            }
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
     }
   }
 }
@@ -822,12 +880,13 @@ input:-webkit-autofill {
   flex-direction:row
 } */
 .validationCode {
-  width:60%
+  width: 60%;
 }
 .captchImg {
   width: 130px;
   background: cadetblue;
   vertical-align: middle;
+  cursor: pointer;
   // display: inline-block;
 }
 </style>