update login encrypt logic

src/router/router.js

@@ -28,10 +28,9 @@ export default [{
     component: App,
     children: [
         {
-            path: '/login',   // 工作站登录统一采用Sass里的工作站登录页面，（工作站首页未登录时跳的就是Sass的工作站登录页面，故重定向至首页根路由即可）
-            redirect: '/'
-            // component: login,
-            // name: 'loginPage',
+          path: '/login',
+          component: login,
+          name: 'loginPage',
         },
         {
             path: '',

src/utils/account/accountApi.js

@@ -41,14 +41,25 @@ export const handleLogout = data => {
   })
 }
 
+// 获取图形验证码
+export const handleGetCaptcha = data => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`account/account/captcha`),
+    method: 'get',
+    data: data,
+    description: '获取图形验证码',
+  })
+}
+
 // 忘记密码时 获取短信验证码
 export const handleGetAuthCode = data => {
   return fetch({
     headers,
-    url: getBaseUrl(`account/authCode`),
+    url: getBaseUrl(`account/account/authCode`),
     method: 'post',
     data: data,
-    description: '获取验证码',
+    description: '获取短信验证码',
   })
 }
 

src/views/login.vue

@@ -48,6 +48,13 @@
               </el-input>
               <p class="err-text" v-show="resetMobileErr"><img src="../assets/image/err-icon.svg" alt="">{{resetMobileErrText}}</p>
             </el-form-item>
+            <el-form-item label="">
+              <el-input v-model="resetPassword.captchaAnswer" placeholder="图形验证码" :class="{errColor: resetCaptchaErr}" maxlength="5">
+                <i slot="prefix" class="el-input__icon my-icon auth-code-icon"></i>
+                <img slot="suffix" style="width:90px;height:36px; border:0;" class="image-check-code" :src="captchaImg" @click="getCaptcha" />
+              </el-input>
+              <p class="err-text" v-show="resetCaptchaErr"><img src="../assets/image/err-icon.svg" alt="">{{resetCaptchaErrText}}</p>
+            </el-form-item>
             <el-form-item label="">
               <el-input v-model="resetPassword.authCode" placeholder="短信验证码" :class="{errColor: resetCodeErr}">
                 <i slot="prefix" class="el-input__icon my-icon auth-code-icon"></i>
@@ -93,7 +100,7 @@
   import { ssoLogin2, getDeviceInfo } from '@/utils/utils';
   import { mapActions } from 'vuex';
   import md5 from 'js-md5';
-  import { handleLogin, handleGetAuthCode, handleResetPWD } from '@/utils/account/accountApi';
+  import { handleLogin, handleGetCaptcha, handleGetAuthCode, handleResetPWD } from '@/utils/account/accountApi';
 
 
   export default {
@@ -116,12 +123,20 @@
         resetCodeErr: '',
         resetCodeErrText: '',
         resetPWDErr: '',
-        resetPWDErrText: ''
+        resetPWDErrText: '',
+        resetCaptchaErr: '',
+        resetCaptchaErrText: '',
+        captchaImg: '',
+        captchaToken: '',
+        // captchaAnswer: '',
+
       }
     },
     created() {
       ssoLogin2(); //初始化登录信息
       vm = this;
+      this.getCaptcha();  // 获取图形验证码
+
     },
     methods: {
       // 修改token
@@ -179,8 +194,33 @@
       hidePWSBtn() {
         this.showPSW = false
       },
+      // 获取图形验证码
+      getCaptcha(){
+        const { config } = this;
+        // 发送图形验证码 ajax
+        handleGetCaptcha().then(res => {
+          console.log('>>>>>>图形验证码获取  res ', res)
+          if(res.code==='000000'){
+            this.captchaImg = `data:image/png;base64,${res.data.content}`
+            this.captchaToken = res.data.token
+          }else{
+            this.$message({
+              message: res.message,
+              type: 'error'
+            });
+          }
+        }).catch(err => {
+          this.$message({
+            message: '图形验证码获取错误！',
+            type: 'error'
+          });
+        })
+
+      },
       // 忘记密码时 获取验证码
       getAuthCode() {
+        // debugger;
+
         if(!this.resetPassword.mobile) {
           this.resetMobileErr = true;
           this.resetMobileErrText = '请输入手机号';
@@ -193,6 +233,15 @@
           this.resetMobileErr = false;
           this.resetMobileErrText = '';
         }
+        
+        if( !this.resetPassword.captchaAnswer ){
+          this.resetCaptchaErr = true;
+          this.resetCaptchaErrText = '请输入图形验证码';
+          return;
+        } else {
+          this.resetCaptchaErr = false;
+          this.resetCaptchaErrText = '';
+        }
 
         // ------------------------  Old  Start-------------------------------
         // let params = {
@@ -235,9 +284,12 @@
         let paramsObj = {
           mobile: this.resetPassword.mobile,
           flag:  4,  // 4 重置密码
+          captchaAnswer: this.resetPassword.captchaAnswer,   // 填写的图形验证码
+          captchaToken: this.captchaToken,
         };
 
         let getAuthCodeCB = params => {
+          // debugger;
           handleGetAuthCode(params).then(res => {
             console.log('>>>>>>login  res ', res)
             if (res.code != '000000') {
@@ -361,7 +413,7 @@
               this.loginMobileErrText = '该手机号尚未注册！';
               return;
             }
-            debugger;
+            // debugger;
             localStorage.setItem("token", res.data.token);
             vm.changeToken(res.data.token)
             localStorage.setItem("storageToken", res.data.token);
@@ -388,6 +440,15 @@
           this.resetMobileErr = false;
           this.resetMobileErrText = '';
         }
+
+        if( !this.resetPassword.captchaAnswer ){
+          this.resetCaptchaErr = true;
+          this.resetCaptchaErrText = '请输入图形验证码';
+        } else {
+          this.resetCaptchaErr = false;
+          this.resetCaptchaErrText = '';
+        }
+
         if(!this.resetPassword.authCode) {
           this.resetCodeErr = true;
           this.resetCodeErrText = '请输入验证码';
@@ -410,6 +471,7 @@
         }
         if(!this.resetPassword.mobile
           ||!this.checkPhone(this.resetPassword.mobile)
+          ||!this.resetPassword.captchaAnswer
           ||!this.resetPassword.authCode
           ||!this.resetPassword.password
           ||!this.checkPassword(this.resetPassword.password)