验证码认证

public/envConfig/evn.staging.js

@@ -8,7 +8,7 @@
  */
 /**测试地址配置 */
 export default {
-    BASE_URL: ' http://192.168.2.15:30087',
+    BASE_URL: 'http://192.168.2.15:30087',
     ESRI_COBFIG_URL: 'http://221.236.31.19:8038',
     MAP_SERVICE_URL: 'http://221.236.31.19:6080',
 }

src/store/modules/user.js

@@ -52,16 +52,16 @@ const mutations = {
 const actions = {
   // user login
   login({ commit, dispatch }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password, verifyCode } = userInfo
     // setSessionStorage('username', username)
     return new Promise((resolve, reject) => {
-      login({ 'username': username, 'password': sha1Hex(password) }).then(response => {
-      // console.log('2222', response)
-      // const data = {
-      //   accessToken: 1111111,
-      //   username: 'admin',
-      //   realName: '超级管理员'
-      // }
+      login({ 'username': username, 'password': sha1Hex(password), 'verifyCode': verifyCode }).then(response => {
+        // console.log('2222', response)
+        // const data = {
+        //   accessToken: 1111111,
+        //   username: 'admin',
+        //   realName: '超级管理员'
+        // }
         const { accessToken, username, avatar, realName, id, departmentId } = response.result
         // const { accessToken, username, avatar, realName } = data
         // setToken(accessToken)

src/views/login/index.vue

@@ -1,30 +1,68 @@
 <template>
   <div class="login-container">
-    <div class="company-name" style="margin-top: -88px;margin-bottom: 90px;">
+    <div class="company-name" style="margin-top: -88px; margin-bottom: 90px">
       <!-- <img src="./images/logo.png"> -->
       <div class="shadow-font">马边县城市供水综合管理平台</div>
       <!-- 马边县城市供水综合管理平台 -->
     </div>
     <div class="fill-container">
       <div class="left">
-        <img src="./images/supplierPipe.png">
+        <img src="./images/supplierPipe.png" />
       </div>
       <div class="right">
         <div class="top">
           <!-- <span>欢迎登录</span>
           <span>智慧水务综合管理平台</span> -->
-          <div class="left-img" style="width: 33%;float: left;margin-top: -14px;text-align: right;">
-            <img src="./images/left.png">
+          <div
+            class="left-img"
+            style="
+              width: 33%;
+              float: left;
+              margin-top: -14px;
+              text-align: right;
+            "
+          >
+            <img src="./images/left.png" />
           </div>
-          <div class="center-span" style="width: 34%;float: left;font-size: 24px;font-weight: bold;text-align: center;color: #2F75E7;">
+          <div
+            class="center-span"
+            style="
+              width: 34%;
+              float: left;
+              font-size: 24px;
+              font-weight: bold;
+              text-align: center;
+              color: #2f75e7;
+            "
+          >
             <span>欢迎登录</span>
           </div>
-          <div class="right-img" style="width: 33%;float: left;margin-top: -14px;">
-            <img src="./images/right.png">
+          <div
+            class="right-img"
+            style="width: 33%; float: left; margin-top: -14px"
+          >
+            <img src="./images/right.png" />
           </div>
         </div>
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form middle" auto-complete="on" label-position="left">
-          <el-input ref="username" v-model="loginForm.username" suffix-icon="el-icon-user" placeholder="请输入账号" name="username" type="text" class="form-input" tabindex="1" auto-complete="on" />
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form middle"
+          auto-complete="on"
+          label-position="left"
+        >
+          <el-input
+            ref="username"
+            v-model="loginForm.username"
+            suffix-icon="el-icon-user"
+            placeholder="请输入账号"
+            name="username"
+            type="text"
+            class="form-input"
+            tabindex="1"
+            auto-complete="on"
+          />
           <el-input
             :key="passwordType"
             ref="password"
@@ -38,221 +76,288 @@
             suffix-icon="el-icon-lock"
             @keyup.enter.native="handleLogin"
           />
+          <div class="form-input">
+            <el-input
+              v-model="loginForm.verifyCode"
+              name="verifyCode"
+              placeholder="请输入验证码"
+              style="float: left;width: calc(100% - 189px);"
+            ></el-input>
+            <img
+              :src="captchaUrl"
+              @click="refreshCaptcha"
+              style="float: left;height: 34px; width: 188px;cursor: pointer"
+            />
+          </div>
         </el-form>
-        <el-button class="login-btn" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
+        <el-button
+          class="login-btn"
+          :loading="loading"
+          @click.native.prevent="handleLogin"
+          >登录</el-button
+        >
       </div>
     </div>
-    <el-dialog title="密码修改" :visible.sync="passwordDialog" append-to-body width="520px" top="25vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
-      <el-form ref="changePwdForm" :model="changePwd" :rules="pwdRules" label-width="100px" label-position="right">
+    <el-dialog
+      title="密码修改"
+      :visible.sync="passwordDialog"
+      append-to-body
+      width="520px"
+      top="25vh"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <el-form
+        ref="changePwdForm"
+        :model="changePwd"
+        :rules="pwdRules"
+        label-width="100px"
+        label-position="right"
+      >
         <el-form-item label="密码：" prop="pass" style="margin-bottom: 25px">
-          <el-input v-model="changePwd.pass" autocomplete="off" type="password" placeholder="请输入密码" suffix-icon="el-icon-lock" />
+          <el-input
+            v-model="changePwd.pass"
+            autocomplete="off"
+            type="password"
+            placeholder="请输入密码"
+            suffix-icon="el-icon-lock"
+          />
         </el-form-item>
         <el-form-item label="确认密码：" prop="checkPass">
-          <el-input v-model="changePwd.checkPass" autocomplete="off" type="password" placeholder="请输入密码" suffix-icon="el-icon-lock" />
+          <el-input
+            v-model="changePwd.checkPass"
+            autocomplete="off"
+            type="password"
+            placeholder="请输入密码"
+            suffix-icon="el-icon-lock"
+          />
         </el-form-item>
       </el-form>
       <template slot="footer">
         <el-button @click="handleDialogBtnClick('cancel')">取消</el-button>
-        <el-button type="primary" @click="handleDialogBtnClick('confirm')">确定</el-button>
+        <el-button type="primary" @click="handleDialogBtnClick('confirm')"
+          >确定</el-button
+        >
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { userFirstLogin } from '@/api/user'
-import { changePassword } from '@/api/base'
-import { regPassword } from '@/utils/reg'
-const sha1Hex = require('sha1-hex')
+import { userFirstLogin } from "@/api/user";
+import { changePassword } from "@/api/base";
+import { regPassword } from "@/utils/reg";
+import { IP } from "@/utils/request.js";
+const sha1Hex = require("sha1-hex");
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     const validatePwd1st = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入密码！'))
+      if (value === "") {
+        callback(new Error("请输入密码！"));
       } else {
-        if (this.changePwd.pass !== '') {
+        if (this.changePwd.pass !== "") {
           if (!regPassword().test(value)) {
-            callback(new Error('密码位数8-16位，必须包含大小写字母和数字，不可包含非法字符！'))
-            return
+            callback(
+              new Error(
+                "密码位数8-16位，必须包含大小写字母和数字，不可包含非法字符！"
+              )
+            );
+            return;
           }
         }
-        callback()
+        callback();
       }
-    }
+    };
     const validatePwd2nd = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
-      } else if (value !== this.changePwd.pass && value !== '') {
-        callback(new Error('两次输入密码不一致！'))
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.changePwd.pass && value !== "") {
+        callback(new Error("两次输入密码不一致！"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
-      url: '@/assets/images/login/logo.png',
+      url: "@/assets/images/login/logo.png",
       loginForm: {
-        username: '',
-        password: ''
+        username: "",
+        password: "",
+        verifyCode: "",
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
-        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
+        username: [{ required: true, trigger: "blur", message: "请输入账号" }],
+        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
+        verifyCode: [{ required: true, trigger: "blur", message: "请输入验证码" }],
       },
       loading: false,
-      passwordType: 'password',
+      passwordType: "password",
       redirect: undefined,
       error: 1,
       // warning: true,
-      msg: '',
+      msg: "",
       passwordDialog: false, // 重置密码用弹窗显隐控制
       changePwd: {
-        pass: '', // 重置密码用新密码
-        checkPass: '' // 重置密码用确认密码
+        pass: "", // 重置密码用新密码
+        checkPass: "", // 重置密码用确认密码
       },
       pwdRules: {
-        pass: [{ required: true, validator: validatePwd1st, trigger: 'blur' }],
-        checkPass: [{ required: true, validator: validatePwd2nd, trigger: 'blur' }]
+        pass: [{ required: true, validator: validatePwd1st, trigger: "blur" }],
+        checkPass: [
+          { required: true, validator: validatePwd2nd, trigger: "blur" },
+        ],
       },
-      userId: ''
-    }
+      userId: "",
+      captchaUrl: IP + "/auth/token/getVerifyCode",
+    };
   },
   computed: {
     sysTitle() {
-      return this.$store.state.settings.sysTitle
-    }
+      return this.$store.state.settings.sysTitle;
+    },
   },
   watch: {
     $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   methods: {
     // 是否显示密码
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = 'text'
+      if (this.passwordType === "password") {
+        this.passwordType = "text";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     // 登录
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         // console.log('111222', this.loginForm)
         if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(res => {
-            const { id } = res.result
-            // 判断是否首次登录或者重置过密码
-            userFirstLogin(id).then(res => {
-              // 先判断用户是否被禁用了 如果是申请的用户 还需要要判断是否同意申请了
-              const { auditstatus, enableFlag } = res.result
-              if (enableFlag === '0') {
-                this.$message({
-                  message: '用户已被禁用，请先启用！',
-                  type: 'error'
+          this.loading = true;
+          this.$store
+            .dispatch("user/login", this.loginForm)
+            .then((res) => {
+              const { id } = res.result;
+              // 判断是否首次登录或者重置过密码
+              userFirstLogin(id)
+                .then((res) => {
+                  // 先判断用户是否被禁用了 如果是申请的用户 还需要要判断是否同意申请了
+                  const { auditstatus, enableFlag } = res.result;
+                  if (enableFlag === "0") {
+                    this.$message({
+                      message: "用户已被禁用，请先启用！",
+                      type: "error",
+                    });
+                    //this.loading = false
+                    sessionStorage.clear();
+                    return;
+                  }
+                  if (auditstatus !== "2" && auditstatus !== null) {
+                    this.$message({
+                      message:
+                        auditstatus === 1
+                          ? "账户还未审核通过！"
+                          : "账户审核未被通过！",
+                      type: "error",
+                    });
+                    //this.loading = false
+                    sessionStorage.clear();
+                    return;
+                  }
+                  // 是首次登录 打开弹窗 修改密码
+                  if (res.result.firstlog === "1") {
+                    this.userId = id;
+                    this.passwordDialog = true;
+                    // 清除掉用户id 防止用户没有修改密码刷新进入页面
+                    sessionStorage.removeItem("userId");
+                    this.$store.state.user.userId = undefined;
+                  } else {
+                    //this.loading = false
+                    this.$router.push({ path: "/" });
+                  }
                 })
-                //this.loading = false
-                sessionStorage.clear()
-                return
-              }
-              if (auditstatus !== '2' && auditstatus !== null) {
-                this.$message({
-                  message: auditstatus === 1 ? '账户还未审核通过！' : '账户审核未被通过！',
-                  type: 'error'
-                })
-                //this.loading = false
-                sessionStorage.clear()
-                return
-              }
-              // 是首次登录 打开弹窗 修改密码
-              if (res.result.firstlog === '1') {
-                this.userId = id
-                this.passwordDialog = true
-                // 清除掉用户id 防止用户没有修改密码刷新进入页面
-                sessionStorage.removeItem('userId')
-                this.$store.state.user.userId = undefined
-              } else {
-                //this.loading = false
-                this.$router.push({ path: '/' })
-              }
-            }).catch(() => {
-              sessionStorage.clear()
-              this.loading = false
+                .catch(() => {
+                  sessionStorage.clear();
+                  this.loading = false;
+                });
+              // this.$router.push({ path: '/' })
             })
-            // this.$router.push({ path: '/' })
-          })
             .catch(() => {
-              this.loading = false
-            })
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
         // this.$router.push('/dashboard')
-      })
+      });
     },
     // 修改密码弹窗
     handleDialogBtnClick(type) {
-      if (type === 'cancel') {
+      if (type === "cancel") {
         this.$nextTick(() => {
-          this.$refs.changePwdForm.resetFields()
-        })
-        this.passwordDialog = false
-        this.changePwd.pass = ''
-        this.changePwd.checkPass = ''
-        sessionStorage.clear()
-        this.loading = false
+          this.$refs.changePwdForm.resetFields();
+        });
+        this.passwordDialog = false;
+        this.changePwd.pass = "";
+        this.changePwd.checkPass = "";
+        sessionStorage.clear();
+        this.loading = false;
       } else {
-        this.$refs.changePwdForm.validate(valid => {
+        this.$refs.changePwdForm.validate((valid) => {
           if (valid) {
-            const originalPassword = '000000'
+            const originalPassword = "000000";
             const data = {
               originalPassword: sha1Hex(originalPassword),
               id: this.userId,
               firstlog: 0,
-              password: sha1Hex(this.changePwd.checkPass)
-            }
-            changePassword(data).then(res => {
+              password: sha1Hex(this.changePwd.checkPass),
+            };
+            changePassword(data).then((res) => {
               if (res.code !== -1) {
                 this.$message({
-                  message: '密码修改成功，请您重新登录！',
-                  type: 'success'
-                })
-                this.passwordDialog = false
-                this.loading = false
-                this.changePwd.pass = ''
-                this.changePwd.checkPass = ''
-                sessionStorage.clear()
+                  message: "密码修改成功，请您重新登录！",
+                  type: "success",
+                });
+                this.passwordDialog = false;
+                this.loading = false;
+                this.changePwd.pass = "";
+                this.changePwd.checkPass = "";
+                sessionStorage.clear();
               } else {
                 this.$nextTick(() => {
-                  this.$refs.changePwdForm.resetFields()
-                })
-                this.passwordDialog = false
-                this.loading = false
-                this.changePwd.pass = ''
-                this.changePwd.checkPass = ''
-                sessionStorage.clear()
+                  this.$refs.changePwdForm.resetFields();
+                });
+                this.passwordDialog = false;
+                this.loading = false;
+                this.changePwd.pass = "";
+                this.changePwd.checkPass = "";
+                sessionStorage.clear();
 
                 this.$message({
                   message: res.message,
-                  type: 'error'
-                })
+                  type: "error",
+                });
               }
-            })
-          } else return false
-        })
+            });
+          } else return false;
+        });
       }
-    }
-  }
-}
+    },
+    refreshCaptcha() {
+      this.captchaUrl = `${IP}/auth/token/getVerifyCode?t=${new Date().getTime()}`; // 加时间戳防止缓存
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -274,7 +379,8 @@ export default {
     display: flex;
     border-radius: 10px;
     background-color: #ffffff;
-    box-shadow: 3px 3px 4px linear-gradient(#333333 40%, #333333 60%, black 80%, blue 100%);
+    box-shadow: 3px 3px 4px
+      linear-gradient(#333333 40%, #333333 60%, black 80%, blue 100%);
     .left {
       flex: 1;
       overflow: hidden;
@@ -294,25 +400,28 @@ export default {
         align-items: center;
         font-size: 30px;
         color: #333333;
-        margin-bottom: 52px;
+        margin-bottom: 28px;
         > span {
           line-height: 30px;
-          &:nth-of-type(2){
+          &:nth-of-type(2) {
             margin-top: 16px;
           }
         }
       }
       .middle {
         width: 320px;
-        height: 106px;
+        height: 126px;
         margin-bottom: 80px;
-        >.form-input {
+        > .form-input {
           height: 36px;
           line-height: 36px;
           /deep/ input {
             height: 36px;
           }
-          &:nth-of-type(2){
+          &:nth-of-type(2) {
+            margin-top: 34px;
+          }
+          &:nth-of-type(3) {
             margin-top: 34px;
           }
         }
@@ -324,7 +433,7 @@ export default {
         overflow: hidden;
         font-size: 16px;
         background: #2d74e7;
-        transition: background .3s linear;
+        transition: background 0.3s linear;
         color: #ffffff;
         &:hover {
           background: #2467d3;
@@ -332,7 +441,7 @@ export default {
       }
     }
   }
-  .shadow-font{
+  .shadow-font {
     color: #ffffff;
     font-size: 40px;
     font-weight: bold;