完善登录验证--改为滑动验证登录

anrui-system-ui/package.json

@@ -29,6 +29,7 @@
     "viewerjs": "^1.9.0",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
+    "vue-monoplasty-slide-verify": "^1.3.1",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "vuex-persistedstate": "^4.0.0",

anrui-system-ui/src/api/user.js

@@ -9,6 +9,16 @@ export function login(data) {
     headers: {'Content-Type': 'application/json'}
   })
 }
+
+export function loginByNoVeriCode(data) {
+  return request({
+    url: '/portal/v1/sysuser/loginByNoVeriCode',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
 // 用户注册
 export function registUser(data) {
   return request({

anrui-system-ui/src/main.js

@@ -4,6 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import slideVerify from 'vue-monoplasty-slide-verify'
+Vue.use(slideVerify)
 
 Vue.use(ElementUI)
 

anrui-system-ui/src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, logout, getInfo, loginByNoVeriCode } from '@/api/user'
 import { getStorage, setStorage, removeStorage } from '@/utils/auth'
 
 import router, { resetRouter } from '@/router'
@@ -25,7 +25,8 @@ const actions = {
   // user login
   login({ commit }, userInfo) {
     return new Promise((resolve, reject) => {
-      login(userInfo).then(response => {
+      // login(userInfo).then(response => {
+      loginByNoVeriCode(userInfo).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setStorage(data.token)

anrui-system-ui/src/views/login/login.vue

@@ -27,7 +27,8 @@
               trigger="click"
               v-model="loginCode"
               @show="codeShow">
-              <imgCodeRole @login="login" ref="imgCodeRole"></imgCodeRole>
+<!--              <imgCodeRole @login="login" ref="imgCodeRole"></imgCodeRole>-->
+              <verify ref="verify" @login="login"/>
               <el-button slot="reference" type="primary" class="login-btn" v-loading="loading">登 录</el-button>
             </el-popover>
             <!--<router-link :to="{name: 'registUser'}"  target="_blank"  tag="a" class="register fl">个人注册</router-link>
@@ -63,9 +64,10 @@ import {
 import user from '@/api/User/login.js'
 import {setToken, getToken, setSession} from '@/utils/auth'
 import imgCodeRole from '@/components/imgCodeRole/index.vue'
+import verify from './verify'
 
 export default {
-  components: {imgCodeRole},
+  components: { imgCodeRole, verify },
   data() {
     return {
       loginForm: {
@@ -94,15 +96,16 @@ export default {
     // },
     login(data) {
       this.loading = true
-      this.loginForm.verifyCode = data.verifyCode
-      this.loginForm.uuid = data.uuid
+      // this.loginForm.verifyCode = data.verifyCode
+      // this.loginForm.uuid = data.uuid
       this.$store.dispatch('user/login', this.loginForm).then((res) => {
         // this.$store.dispatch('user/getInfo')
-        this.$router.push({path: '/home'})
+        this.$router.push({ path: '/home' })
         this.loading = false
       }).catch(() => {
         this.loading = false
-        this.$refs.imgCodeRole.getCodeImage()
+        this.$refs.verify.onRefresh()
+        // this.$refs.imgCodeRole.getCodeImage()
       })
     },
     codeShow() {
@@ -111,7 +114,7 @@ export default {
         this.showMsg = true
         return;
       }
-      this.$refs.imgCodeRole.getCodeImage()
+      // this.$refs.imgCodeRole.getCodeImage()
     },
     handleforgetPwd() {
       this.forgetPwd = true

anrui-system-ui/src/views/login/verify.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <slideVerify ref="slideblock" :l="42" :r="10" :w="350" :h="160" slider-text="向右滑动" @success="onSuccess" @fail="onFail" @/>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  data() {
+    return {
+      verified: false
+    }
+  },
+  methods: {
+    onSuccess() {
+      this.verified = true
+      this.$emit('login', this.verified)
+    },
+    onFail() {},
+    onRefresh() {
+      this.$refs.slideblock.reset()
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>