Procházet zdrojové kódy

bug修复 首次登陆需修改密码

chenrui před 4 roky
rodič
revize
be27210a11

+ 1 - 0
src/store/getters.js

@@ -5,6 +5,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,
+  mustChangePwd: state => state.user.mustChangePwd,
   welcome: state => state.user.welcome,
   roles: state => state.user.roles,
   userInfo: state => state.user.info,

+ 8 - 0
src/store/modules/user.js

@@ -7,6 +7,7 @@ const user = {
   state: {
     token: '',
     name: '',
+    mustChangePwd: null,
     welcome: '',
     avatar: '',
     roles: { permissionList: [] },
@@ -31,6 +32,9 @@ const user = {
     },
     SET_INFO: (state, info) => {
       state.info = info
+    },
+    SET_MUSTCHANGEPWD: (state, status) => {
+      state.mustChangePwd = status
     }
   },
 
@@ -47,7 +51,9 @@ const user = {
               const users = res.auth_user
               Vue.ls.set('hasError', 0)
               commit('SET_TOKEN', res.access_token)
+              commit('SET_INFO', users)
               commit('SET_NAME', { name: users.userNameCN, welcome: welcome() })
+              commit('SET_MUSTCHANGEPWD', users.mustChangePwd)
               Vue.ls.set('rolesAccess', { permissionList: users.permCodes }, 7 * 24 * 60 * 60 * 1000)
               commit('SET_AVATAR', res.avatar ? res.avatar : '')
               // 记住密码
@@ -87,7 +93,9 @@ const user = {
         }).catch((error) => {
           resolve(error)
         }).finally(() => {
+          commit('SET_INFO', {})
           commit('SET_NAME', { name: '', welcome: '' })
+          commit('SET_MUSTCHANGEPWD', '')
           commit('SET_AVATAR', '')
           commit('SET_TOKEN', '')
           commit('SET_ROLES', { permissionList: [] })

+ 32 - 3
src/views/Home.vue

@@ -1,22 +1,51 @@
 <template>
   <div class="home">
     <a-alert :message="message" type="info" showIcon />
+    <!-- 重置密码 -->
+    <a-modal
+      class="resetPwdModal"
+      title="重置密码"
+      width="60%"
+      centered
+      :footer="null"
+      :closable="false"
+      :maskClosable="false"
+      :destroyOnClose="true"
+      @cancel="openResetPwd=false"
+      v-model="openResetPwd">
+      <ResetPwd />
+    </a-modal>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import ResetPwd from '@/views/user/ResetPwd.vue'
 export default {
   name: 'Home',
-  components: {
-  },
+  components: { ResetPwd },
   data () {
     return {
-      message: '欢迎登录' + process.env.VUE_APP_PRO_NAME
+      message: '欢迎登录' + process.env.VUE_APP_PRO_NAME,
+      openResetPwd: false //  重置密码是否显示
     }
   },
+  computed: {
+    ...mapGetters(['mustChangePwd'])
+  },
   created () {
   },
   methods: {
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      //  判断登录用户是否重置过密码(首次登陆需强制重置密码)
+      if (vm.mustChangePwd == 0) {
+        vm.openResetPwd = false
+      } else {
+        vm.openResetPwd = true
+      }
+    })
   }
 }
 </script>

+ 1 - 3
src/views/power/user/userModal.vue

@@ -267,9 +267,7 @@ export default {
 }
 </script>
 
-<style >
-  .modalBox{
-  }
+<style>
   .ant-modal-footer {
     display: none;
   }

+ 10 - 158
src/views/user/ChangePwd.vue

@@ -1,173 +1,25 @@
 <template>
-
   <a-card :bordered="false" class="change-pwd-card">
-    <a-row :gutter="24" class="change-pwd">
-      <a-col span="8" offset="8">
-        <a-form @submit="handleSubmit" :form="form">
-          <!-- 原始密码 -->
-          <a-form-item
-            label="原始密码"
-            prop="oldPwd"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.oldPwd',
-                { initialValue: formCustom.oldPwd,
-                  rules: [
-                    { required: true, message: '请输入原始密码(6~12位)' }
-                  ]
-                },
-              ]"
-              :maxLength="12"
-              placeholder="请输入原始密码(6~12位)">
-            </a-input>
-          </a-form-item>
-          <!-- 新密码 -->
-          <a-form-item
-            label="新密码"
-            prop="passwd"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.passwd',
-                { initialValue: formCustom.passwd,
-                  rules: [
-                    { required: true, message: '请输入新密码(6~12位)' },
-                    { validator: passwordValid }
-                  ]
-                },
-              ]"
-              :maxLength="12"
-              placeholder="请输入新密码(6~12位)">
-            </a-input>
-          </a-form-item>
-          <!-- 再次确认 -->
-          <a-form-item
-            label="再次确认"
-            prop="passwdCheck"
-            :label-col="formLayout.labelCol"
-            :wrapper-col="formLayout.wrapperCol">
-            <a-input
-              type="password"
-              v-decorator="[
-                'formCustom.passwdCheck',
-                { initialValue: formCustom.passwdCheck,
-                  rules: [
-                    { required: true, message: '请再次输入密码(6~12位)' },
-                    { validator: compareToFirstPassword }
-                  ]
-                },
-              ]"
-              :maxLength="12"
-              placeholder="请再次输入密码(6~12位)">
-            </a-input>
-          </a-form-item>
-          <a-col span="16" offset="8">
-            <a-form-item>
-              <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
-              <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
-            </a-form-item>
-          </a-col>
-        </a-form>
+    <a-row :gutter="24">
+      <a-col span="12" offset="6">
+        <ResetPwd />
       </a-col>
     </a-row>
   </a-card>
-
 </template>
 
 <script>
-import { changePwd } from '@/api/login.js'
-import { mapActions, mapGetters } from 'vuex'
-
+import ResetPwd from '@/views/user/ResetPwd.vue'
 export default {
   name: 'ChangePwd',
-  data () {
-    return {
-      formLayout: {
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 6 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 18 }
-        }
-      },
-      form: this.$form.createForm(this),
-      loading: false,
-      formCustom: {
-        passwd: '',
-        passwdCheck: '',
-        oldPwd: ''
-      }
-    }
-  },
-  methods: {
-    ...mapActions(['Logout']),
-    //  密码位数校验
-    passwordValid (rule, value, callback) {
-      if (value.length < 6 || value.length > 12) {
-        callback('请输入6~12位密码!')
-      } else {
-        callback()
-      }
-    },
-    // 密码校验
-    compareToFirstPassword (rule, value, callback) {
-      const form = this.form
-      if (value && value !== form.getFieldValue('formCustom.passwd')) {
-        callback('两次输入的密码不一致, 请重新输入!')
-      } else {
-        callback()
-      }
-    },
-    handleSubmit (e) {
-      e.preventDefault()
-      const _this = this
-      this.form.validateFields((err, values) => {
-        console.log(values, 'values')
-        if (!err) {
-          changePwd({
-            oldPassword: values.formCustom.oldPwd,
-            password: values.formCustom.passwd
-          }).then(res => {
-            console.log(res, 'res111111')
-            if (res.status === '200') {
-              _this.$message.success('修改成功, 请重新登录')
-              _this.logout()
-            } else {
-              // _this.$message.error(res.message)
-            }
-          })
-        }
-      })
-    },
-    logout () {
-      this.Logout({}).then(() => {
-        setTimeout(() => {
-          this.$router.push({ path: '/user/login' })
-        }, 16)
-      })
-    },
-    handleReset () {
-      this.form.resetFields()
-    }
+  components: {
+    ResetPwd
   }
-
 }
 </script>
 
-<style scoped>
-  .change-pwd {
-    margin-top: 15vh;
-  }
-
-  .change-pwd-card {
-    height: 70vh;
-    /* border-top: 2px solid #FFB01B; */
-  }
+<style lang="less" scoped>
+.change-pwd-card {
+  padding-top: 50px;
+}
 </style>

+ 166 - 0
src/views/user/ResetPwd.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="change-pwd">
+    <a-form @submit="handleSubmit" :form="form">
+      <!-- 原始密码 -->
+      <a-form-item
+        label="原始密码"
+        prop="oldPwd"
+        :label-col="formLayout.labelCol"
+        :wrapper-col="formLayout.wrapperCol">
+        <a-input
+          type="password"
+          :maxLength="12"
+          placeholder="请输入原始密码(6~12位)"
+          v-decorator="[
+            'formCustom.oldPwd',
+            { initialValue: formCustom.oldPwd,
+              rules: [
+                { required: true, message: '请输入原始密码' },
+              ]
+            },
+          ]">
+        </a-input>
+      </a-form-item>
+      <!-- 新密码 -->
+      <a-form-item
+        label="新密码"
+        prop="passwd"
+        :label-col="formLayout.labelCol"
+        :wrapper-col="formLayout.wrapperCol">
+        <a-input
+          type="password"
+          :maxLength="12"
+          placeholder="请输入新密码(6~12位)"
+          v-decorator="[
+            'formCustom.passwd',
+            { initialValue: formCustom.passwd,
+              rules: [
+                { required: true, message: '请输入新密码' },
+                { validator: passwordValid }
+              ]
+            },
+          ]">
+        </a-input>
+      </a-form-item>
+      <!-- 再次确认 -->
+      <a-form-item
+        label="再次确认"
+        prop="passwdCheck"
+        :label-col="formLayout.labelCol"
+        :wrapper-col="formLayout.wrapperCol">
+        <a-input
+          type="password"
+          :maxLength="12"
+          placeholder="请再次输入新密码(6~12位)"
+          v-decorator="[
+            'formCustom.passwdCheck',
+            { initialValue: formCustom.passwdCheck,
+              rules: [
+                { required: true, message: '请再次输入密码' },
+                { validator: compareToFirstPassword }
+              ]
+            },
+          ]">
+        </a-input>
+      </a-form-item>
+      <!-- <a-col span="16" offset="8"> -->
+      <a-form-item>
+        <div style="text-align: center;">
+          <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
+          <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
+        </div>
+      </a-form-item>
+      <!-- </a-col> -->
+    </a-form>
+  </div>
+  <!-- <a-row :gutter="24" class="change-pwd">
+    <a-col span="16" offset="8">
+
+    </a-col>
+  </a-row> -->
+</template>
+
+<script>
+import { changePwd } from '@/api/login.js'
+import { mapActions } from 'vuex'
+export default {
+  name: 'ResetPwd',
+  data () {
+    return {
+      // formLayout: {
+      //   labelCol: {
+      //     xs: { span: 24 },
+      //     sm: { span: 6 },
+      //     md: { span: 4 }
+      //   },
+      //   wrapperCol: {
+      //     xs: { span: 24 },
+      //     sm: { span: 18 },
+      //     md: { span: 20 }
+      //   }
+      // },
+      formLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 20 }
+      },
+      form: this.$form.createForm(this),
+      loading: false,
+      formCustom: {
+        passwd: '',
+        passwdCheck: '',
+        oldPwd: ''
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['Logout']),
+    //  密码位数校验
+    passwordValid (rule, value, callback) {
+      if (value.length < 6 || value.length > 12) {
+        callback('请输入6~12位密码!')
+      } else {
+        callback()
+      }
+    },
+    // 密码校验
+    compareToFirstPassword (rule, value, callback) {
+      const form = this.form
+      if (value && value !== form.getFieldValue('formCustom.passwd')) {
+        callback('两次输入的密码不一致, 请重新输入!')
+      } else {
+        callback()
+      }
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          changePwd({
+            oldPassword: values.formCustom.oldPwd,
+            password: values.formCustom.passwd
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success('修改成功, 请重新登录')
+              _this.logout()
+            }
+          })
+        }
+      })
+    },
+    logout () {
+      this.Logout({}).then(() => {
+        setTimeout(() => {
+          this.$router.push({ path: '/user/login' })
+        }, 16)
+      })
+    },
+    handleReset () {
+      this.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style>
+</style>