添加登录错误限制和密码修改

package.json

@@ -24,6 +24,7 @@
     "file-saver": "^2.0.5",
     "js-cookie": "2.2.0",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

public/staticConfig.js

@@ -6,7 +6,10 @@ window.PLATFROM_CONFIG = {
   appId: 'q7kdjmmaf0kerwpf', //appid
   baggageMessageURL: '/openApi/query',
   getBase64: 'http://10.211.67.163:8083/getBase64',
-  editRule: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[`!@#$%^&*()_+{}":?><`,./';=-])[\da-zA-Z`!@#$%^&*()_+{}":?><`,./';=-]{8,}$/
+  editRule: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[`!@#$%^&*()_+{}":?><`,./';=-])[\da-zA-Z`!@#$%^&*()_+{}":?><`,./';=-]{8,}$/,
+  maxCount: 5, //登录错误次数
+  maxTime: 10, //登录错误次数后可再次登录时间(分钟)
+  loseTimeHour: 48 //失效间隔时间(小时)
 }
 
 const baseNewUrl = window.location.hostname

src/layout/index.vue

@@ -30,7 +30,7 @@
         </div>
         <div class="foot center t30">
           <el-button size="medium" type="primary" @click="addSubmit('dataForm')" class="r24">保存</el-button>
-          <el-button size="medium" @click="resetForm('dataForm')">取消</el-button>
+          <el-button v-if="!restFlag" size="medium" @click="resetForm('dataForm')">取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -58,7 +58,7 @@ import ResizeMixin from './mixin/ResizeHandler'
 import { mapGetters } from 'vuex'
 // import { changePassword } from "@/api/newLogin";
 // import { removeToken } from "@/utils/auth";
-import { modifyData } from '@/api/webApi'
+import { modifyData, Query } from '@/api/webApi'
 import Dialog from '@/layout/components/Dialog'
 import MD5 from 'blueimp-md5'
 import PassengerDialog from '@/components/PassengerDialog'
@@ -95,12 +95,45 @@ export default {
           { required: true, message: '请再次确认新密码', trigger: 'blur' },
         ],
       },
+      restFlag: false
     }
   },
   computed: {
-    ...mapGetters(['pwdflag', 'outflag', 'name']),
+    ...mapGetters(['pwdflag', 'outflag', 'name', 'UserId']),
+  },
+  mounted () {
+    this.getLastLoginTime()
   },
   methods: {
+    //获取最后登录时间
+    async getLastLoginTime () {
+      try {
+        const { code, returnData } = await Query({
+          serviceId: SERVICE_ID.getUserTableId,
+          dataContent: { user_id: this.UserId },
+          event: '0',
+        })
+        if (code == 0 && returnData.length) {
+          const { lastPasswordModificationTime } = returnData[0]
+          if (!lastPasswordModificationTime) {
+            this.restFlag = true
+            this.$store.dispatch('app/togglePwdflag', true)
+          } else {
+            const lastTime = this.$moment(lastPasswordModificationTime).format('YYYY-MM-DD HH:mm:ss')
+            const newTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+            if (this.$moment(newTime).diff(lastTime, 'hours') > PLATFROM_CONFIG.loseTimeHour) {
+              this.restFlag = true
+              this.$store.dispatch('app/togglePwdflag', true)
+            }
+          }
+        } else {
+          this.restFlag = false
+          this.$store.dispatch('app/togglePwdflag', false)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
     //存储数据项-提交
     addSubmit (formName) {
       this.$refs[formName].validate(valid => {
@@ -176,6 +209,7 @@ export default {
             ],
             Value: {
               user_pwd: MD5(this.dataForm.again),
+              lastPasswordModificationTime: this.$moment().format("YYYY-MM-DD HH:mm:ss")
             },
           },
         })

src/main.js

@@ -7,6 +7,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss' // global css
 import _ from 'lodash'
 import * as echarts from 'echarts'
+import moment from 'moment'
 import Vue2OrgTree from 'vue2-org-tree'
 import 'vue2-org-tree/dist/style.css'
 import elTableInfiniteScroll from 'el-table-infinite-scroll'
@@ -24,10 +25,11 @@ import '@/config/checkPermission' //按钮权限 全局自定义指令v-is
 Vue.use(ElementUI)
 Vue.prototype._ = _
 Vue.prototype.$echarts = echarts
+Vue.prototype.$moment = moment
 Vue.use(Vue2OrgTree)
 Vue.use(elTableInfiniteScroll)
 Vue.use(xss)
-
+moment.locale('zh-cn')
 Vue.config.productionTip = false
 
 new Vue({

src/store/getters.js

@@ -28,6 +28,8 @@ const getters = {
   authMsg: state => state.auth.authMsg,
   userRole: state => state.app.OpenRole,
   userPowerList: state => state.user.userPoewrList,
+  userLoginList: state => state.user.userLoginList,
+  userLoginState: state => state.user.userLoginState,
   permission_routes: state => state.permission.routes,
   queryForm: state => state.app.queryForm,
   timeZone: state => state.timeZone.currentTimeZone,

src/store/modules/user.js

@@ -14,7 +14,9 @@ const getDefaultState = () => {
     UserId: sessionStorage.getItem('User_Id') ? sessionStorage.getItem('User_Id') : '',
     userPoewrList: sessionStorage.getItem('userAuthList') ? JSON.parse(sessionStorage.getItem('userAuthList')) : [],
     // userPoewrList: sessionStorage.setItem('userAuthList') ? JSON.parse(sessionStorage.getItem('userAuthList')) : []
-    userChecked: !!sessionStorage.getItem('userChecked')
+    userChecked: !!sessionStorage.getItem('userChecked'),
+    userLoginList: localStorage.getItem('userLoginList') ? JSON.parse(localStorage.getItem('userLoginList')) : [],
+    userLoginState: localStorage.getItem('userLoginState') ? JSON.parse(localStorage.getItem('userLoginState')) : { state: false, time: 60 * PLATFROM_CONFIG.maxTime },
   }
 }
 
@@ -49,6 +51,14 @@ const mutations = {
   SET_UserPoewrList: (state, arr) => {
     state.userPoewrList = arr
   },
+  SET_UserLoginList: (state, arr) => {
+    state.userLoginList = arr
+    localStorage.setItem('userLoginList', JSON.stringify(arr))
+  },
+  SET_UserLoginState: (state, arr) => {
+    state.userLoginState = arr
+    localStorage.setItem('userLoginState', JSON.stringify(arr))
+  },
   SET_USER_CHECKED (state, flag) {
     state.userChecked = flag
     if (flag) {
@@ -146,6 +156,14 @@ const actions = {
     commit('SET_UserPoewrList', arr)
   },
 
+  setLoginList ({ commit }, arr) {
+    commit('SET_UserLoginList', arr)
+  },
+
+  setLoginState ({ commit }, arr) {
+    commit('SET_UserLoginState', arr)
+  },
+
   setPowerToken ({ commit }, token) {
     commit('SET_TOKEN', token)
   },

src/views/login/index.vue

@@ -33,6 +33,7 @@
       </div>
 
       <el-button :loading="loading" type="primary" style="width: 100%;margin-top: 18px;height: 42px;border-radius: 2px;" @click.native.prevent="handleLogin">登录</el-button>
+      <p v-if="timeMinunt.state" class="stateError">当前登录错误次数过多，{{timeMinunt.time}}分钟后可以再次登录</p>
     </el-form>
   </div>
 </template>
@@ -42,6 +43,7 @@ import { isValue } from "@/utils/validate";
 import { getVCode, getToken } from "@/api/login";
 import { setCodeToken, getCodeToken, setToken } from '@/utils/auth';
 import MD5 from 'blueimp-md5'
+import { mapGetters } from 'vuex'
 export default {
   name: "Login",
   data () {
@@ -70,7 +72,9 @@ export default {
       pageTitle: '',
       imgSrc: '',
       baseImg: '',
-      appId: ''
+      appId: '',
+      userCount: 0,
+      timer: null,
     };
   },
   watch: {
@@ -81,6 +85,14 @@ export default {
       immediate: true,
     }
   },
+  computed: {
+    ...mapGetters(['userLoginList', 'userLoginState']),
+    timeMinunt () {
+      const userState = this.userLoginState
+      const { time, state } = userState
+      return { state, time: Math.ceil(time / (1000 * 60)) }
+    }
+  },
   async created () {
     try {
       const { code, returnData, message } = await getToken({
@@ -99,6 +111,13 @@ export default {
         if (app_code_rule) {
           this.getCheckCode()
         }
+        const loginList = this.userLoginList
+        //登录限制查询
+        if (loginList.length > PLATFROM_CONFIG.maxCount && this.getLoginState()) {
+          this.loading = true
+          const userState = this.userLoginState
+          this.timePiker(userState)
+        }
       } else {
         this.$message.error(message);
       }
@@ -106,6 +125,11 @@ export default {
       this.$message.error(error.message);
     }
   },
+  beforeDestroy () {
+    clearInterval(this.timer)
+    this.timer = null
+    this.loading = false
+  },
   methods: {
     showPwd () {
       if (this.passwordType === "password") {
@@ -132,20 +156,68 @@ export default {
           this.$store
             .dispatch("user/login", params)
             .then(async () => {
-              this.$store.dispatch("app/toggleOutcheck", false);
+              clearInterval(this.timer)
+              this.timer = null
+              this.$store.dispatch("app/toggleOutcheck", false)
+              this.$store.dispatch("user/setLoginList", [])
+              this.$store.dispatch("user/setLoginState", { state: false, time: 60 * PLATFROM_CONFIG.maxTime })
               sessionStorage.setItem("userName", params.username);
               this.$router.push({ path: this.redirect || "/" });
               this.loading = false;
             })
             .catch(() => {
+              const mapDataLen = this.restrictLogin();
               this.getCheckCode();
-              this.loading = false;
+              if (mapDataLen > PLATFROM_CONFIG.maxCount) {
+                this.$message.error('登录错误次数超过最大登录次数限制，禁止登录')
+                this.loading = true
+                const userState = this.userLoginState
+                this.timePiker(userState)
+              } else {
+                this.loading = false;
+              }
             });
         } else {
           return false;
         }
       });
     },
+    // 限制登录
+    restrictLogin () {
+      const loginParams = {
+        username: this.loginForm.username.replace(/\s+/g, ""),
+      }
+      const loginList = this.userLoginList
+      loginList.push(loginParams)
+      this.$store.dispatch("user/setLoginList", loginList)
+      const mapData = loginList.filter(item => item.username === this.loginForm.username)
+      return mapData.length
+    },
+    //登录计时器
+    timePiker (userState) {
+      this.timer = setInterval(() => {
+        const newTime = userState.time--
+        const newState = { state: true, time: newTime }
+        this.$store.dispatch("user/setLoginState", newState)
+        if (userState.time == 0) {
+          clearInterval(this.timer)
+          this.timer = null
+          this.loading = false
+          this.$store.dispatch("user/setLoginList", [])
+          this.$store.dispatch("user/setLoginState", { state: false, time: 60 * PLATFROM_CONFIG.maxTime })
+        }
+      }, 1000);
+    },
+    //登录状态
+    getLoginState () {
+      const userState = this.userLoginState
+      const newTime = userState.time
+      if (newTime == 0) {
+        return false
+      } else {
+        return true
+      }
+    },
     //获取动态验证码
     async getCheckCode () {
       const { code, message, returnData } = await getVCode({
@@ -173,7 +245,11 @@ export default {
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
-
+.stateError {
+  font-size: 12px;
+  color: #f00;
+  text-align: center;
+}
 .login-container {
   min-height: 100%;
   width: 100%;