路由缓存问题、初次登录、系统内密码修改

2021-10-11 12:00:31 +08:00
parent 34be7fae21
commit a5fb8026bf
8 changed files with 191 additions and 132 deletions
@@ -22,7 +22,7 @@
    <div style=" overflow: auto">
      <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
      <div>
-        <keep-alive v-if="multipage">
+        <keep-alive v-if="multipage && $route.meta.keepAlive">
          <router-view v-if="reloadFlag"/>
        </keep-alive>
        <template v-else>
@@ -143,7 +143,7 @@
        })
      },
      updatePassword(){
-        let username = this.userInfo().username
+        let username = this.userInfo().phone
        this.$refs.userPassword.show(username)
      },
      updateCurrentDepart(){
@@ -11,25 +11,26 @@
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="旧密码">
-          <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
-        </a-form-item>
+<!--        <a-form-item-->
+<!--          :labelCol="labelCol"-->
+<!--          :wrapperCol="wrapperCol"-->
+<!--          label="旧密码">-->
+<!--          <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]"/>-->
+<!--        </a-form-item>-->

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="新密码">
-          <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'password', validatorRules.password]" />
+          <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'password', validatorRules.password]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认新密码">
-          <a-input type="password" @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
+          <a-input type="password" @blur="handleConfirmBlur" placeholder="请确认新密码"
+                   v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
        </a-form-item>

      </a-form>
@@ -39,116 +40,135 @@

 <script>

-  import { putAction } from '@/api/manage'
+import { putAction } from '@/api/manage'
+import { getRSAPublicKey } from '@api/login'
+import { JSEncrypt } from 'jsencrypt'

-  export default {
-    name: 'UserPassword',
-    data () {
-      return {
-        title:'修改密码',
-        modalWidth:800,
-        visible: false,
-        confirmLoading: false,
-        validatorRules:{
-          oldpassword:{
-            rules: [{
-              required: true, message: '请输入旧密码!',
-            }],
-          },
-          password:{
-            rules: [
-              { required: true, message: '请输入新密码!' },
-              { pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字、大小写字母和特殊符号组成!'},
-              { validator: this.validateToNextPassword }
-            ]
-          },
-          confirmpassword:{
-            rules: [
-              { required: true, message: '请确认新密码!' },
-              { pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字、大小写字母和特殊符号组成!'},
-              { validator: this.validateToNextPassword }
-            ]
-          }
-        },
-        confirmDirty:false,
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
+export default {
+  name: 'UserPassword',
+  data() {
+    return {
+      title: '修改密码',
+      modalWidth: 800,
+      visible: false,
+      confirmLoading: false,
+      validatorRules: {
+        // oldpassword: {
+        //   rules: [{
+        //     required: true, message: '请输入旧密码!'
+        //   }]
+        // },
+        password: {
+          rules: [
+            { required: true, message: '请输入新密码!' },
+            {
+              pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+              message: '密码由8位数字、大小写字母和特殊符号组成!'
+            },
+            { validator: this.validateToNextPassword }
+          ]
        },
+        confirmpassword: {
+          rules: [
+            { required: true, message: '请确认新密码!' },
+            {
+              pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+              message: '密码由8位数字、大小写字母和特殊符号组成!'
+            },
+            { validator: this.compareToFirstPassword }
+          ]
+        }
+      },
+      confirmDirty: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },

-        form:this.$form.createForm(this),
-        url: 'sys/user/updatePassword',
-        username:'',
+      form: this.$form.createForm(this),
+      url: '/company/changePassword',
+      username: '',
+      rsaPublicKey: '' // 公钥
+    }
+  },
+  methods: {
+    show(uname) {
+      if (!uname) {
+        this.$message.warning('当前系统无登录用户!')
+        return
+      } else {
+        this.username = uname
+        this.form.resetFields()
+        this.getPublicKey()
+        this.visible = true
      }
    },
-    methods: {
-      show(uname){
-        if(!uname){
-          this.$message.warning('当前系统无登录用户!')
-          return
-        }else{
-          this.username = uname
-          this.form.resetFields()
-          this.visible = true
+    handleCancel() {
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.disableSubmit = false
+      this.selectedRole = []
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          let encrypt = new JSEncrypt()
+          encrypt.setPublicKey(this.rsaPublicKey)
+          let params = {}
+          params.rsaPublicKey = this.rsaPublicKey
+          params.newPassword = encrypt.encrypt(values.password)
+          params.verifyPassword = encrypt.encrypt(values.confirmpassword)
+          console.log('修改密码提交数据', params)
+          putAction(this.url, params).then((res) => {
+            if (res.success) {
+              console.log(res)
+              that.$message.success(res.message)
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
        }
-      },
-      handleCancel () {
-        this.close()
-      },
-      close () {
-        this.$emit('close')
-        this.visible = false
-        this.disableSubmit = false
-        this.selectedRole = []
-      },
-      handleOk () {
-        const that = this
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true
-            let params = Object.assign({username:this.username},values)
-            console.log('修改密码提交数据',params)
-            putAction(this.url,params).then((res)=>{
-              if(res.success){
-                console.log(res)
-                that.$message.success(res.message)
-                that.close()
-              }else{
-                that.$message.warning(res.message)
-              }
-            }).finally(() => {
-              that.confirmLoading = false
-            })
-          }
-        })
-      },
-      validateToNextPassword  (rule, value, callback) {
-        const form = this.form
-        if (value && this.confirmDirty) {
-          form.validateFields(['confirm'], { force: true })
-        }
-        callback()
-      },
-      compareToFirstPassword  (rule, value, callback) {
-        const form = this.form
-        if (value && value !== form.getFieldValue('password')) {
-          callback('两次输入的密码不一样！')
-        } else {
-          callback()
-        }
-      },
-      handleConfirmBlur  (e) {
-        const value = e.target.value
-        this.confirmDirty = this.confirmDirty || !!value
+      })
+    },
+    validateToNextPassword(rule, value, callback) {
+      const form = this.form
+      if (value && this.confirmDirty) {
+        form.validateFields(['confirm'], { force: true })
      }
-
+      callback()
+    },
+    compareToFirstPassword(rule, value, callback) {
+      const form = this.form
+      if (value && value !== form.getFieldValue('password')) {
+        callback('两次输入的密码不一样！')
+      } else {
+        callback()
+      }
+    },
+    handleConfirmBlur(e) {
+      const value = e.target.value
+      this.confirmDirty = this.confirmDirty || !!value
+    },
+    getPublicKey() {
+      getRSAPublicKey().then(res => {
+        this.rsaPublicKey = res.result
+      })
    }
  }
+}
 </script>

 <style scoped>
@@ -22,7 +22,7 @@ export default {
  fixSiderbar: false, // sticky siderbar
  autoHideHeader: false, //  auto hide header
  colorWeak: false,
-  multipage: false, //默认多页签模式
+  multipage: true, //默认多页签模式
  // vue-ls options
  storageOptions: {
    namespace: 'pro__', // key prefix
@@ -103,17 +103,22 @@ const user = {
      return new Promise((resolve, reject) => {
        phoneLogin(userInfo).then(response => {
          if (response.code == '200') {
-            const result = response.result
-            const userInfo = result.userInfo
-            Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
-            Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
-            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
-            Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
-            commit('SET_TOKEN', result.token)
-            commit('SET_INFO', userInfo)
-            commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
-            commit('SET_AVATAR', userInfo.avatar)
-            resolve(response)
+            // 初次登录需要跳转至修改密码，不存用户信息
+            if (response.message === 'updatePassword') {
+              resolve(response)
+            } else {
+              const result = response.result
+              const userInfo = result.userInfo
+              Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
+              Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
+              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
+              Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
+              commit('SET_TOKEN', result.token)
+              commit('SET_INFO', userInfo)
+              commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
+              commit('SET_AVATAR', userInfo.avatar)
+              resolve(response)
+            }
          } else {
            reject(response)
          }
@@ -122,6 +127,28 @@ const user = {
        })
      })
    },
+    /**
+     * 初次手机号登录，修改密码后再存用户信息
+     * @param commit
+     * @param userInfo
+     * @returns {Promise<unknown>}
+     * @constructor
+     */
+    FirstPhoneLogin({ commit }, loginUserInfo) {
+      return new Promise((resolve, reject) => {
+        const result = loginUserInfo.result
+        const userInfo = result.userInfo
+        Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
+        Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
+        Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
+        Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
+        commit('SET_TOKEN', result.token)
+        commit('SET_INFO', userInfo)
+        commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
+        commit('SET_AVATAR', userInfo.avatar)
+        resolve(loginUserInfo)
+      })
+    },
    // 获取用户信息
    GetPermissionList({ commit }) {
      return new Promise((resolve, reject) => {
@@ -70,7 +70,7 @@ export default {
            canEdit: true
          }, {
            title: '性别',
-            fieldName: 'gender',
+            fieldName: 'gender_dictText',
            canEdit: true
          }
        ], [
@@ -150,10 +150,11 @@ import { mapActions } from 'vuex'
 import { timeFix } from '@/utils/util'
 import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
-import { postAction, getAction } from '@/api/manage'
+import {  getAction } from '@/api/manage'
 import { getRSAPublicKey } from '@/api/login.js'
 import { JSEncrypt } from 'jsencrypt'
 import { phoneReg } from '@/utils/validate'
+import { phoneLogin } from '@/api/login.js'

 export default {
  components: {},
@@ -253,7 +254,7 @@ export default {
            httpFunction = that.Login
          }
          httpFunction(loginParams).then((response) => {
-            if (response.message.indexOf('updatePassword') > -1) {
+            if (response.message === 'updatePassword') {
              this.$notification['error']({
                message: '设置密码',
                description: '初次登录需要设置密码',
@@ -263,6 +264,7 @@ export default {
                path: '/user/alteration',
                query: {
                  isFirstLogin: 'true',
+                  userInfo: JSON.stringify(response)
                }
              })
            } else {
@@ -36,6 +36,7 @@
                <a-input
                  v-decorator="['captcha', { rules: validatorRules.captcha.rules}]"
                  type="text"
+                  autocomplete="off"
                  placeholder="验证码">
                </a-input>
                <a-button
@@ -100,6 +101,8 @@ import { getAction, postAction } from '@/api/manage'
 import { getRSAPublicKey } from '@api/login'
 import { JSEncrypt } from 'jsencrypt'
 import { timeFix } from '@/utils/util'
+import { mapActions } from 'vuex'
+

 export default {
  name: 'Alteration',
@@ -144,6 +147,7 @@ export default {
    }
  },
  methods: {
+    ...mapActions(['FirstPhoneLogin']),
    submit() {
      let that = this
      that.loading = true
@@ -162,12 +166,18 @@ export default {
            if (res.success) {
              that.loading = false
              if (this.$route.query.isFirstLogin === 'true') {
-                // 进入首页
-                this.$router.push({ path: '/' }).catch(() => {
-                })
-                this.$notification.success({
-                  message: '欢迎',
-                  description: `${ timeFix() }，欢迎回来`
+                let loginResponse = JSON.parse(that.$route.query.userInfo)
+                that.FirstPhoneLogin(loginResponse).then(res => {
+                  if (res.code === 200) {
+                    that.FirstPhoneLogin(loginResponse)
+                    // 进入首页
+                    this.$router.push({ path: '/' }).catch(() => {
+                    })
+                    this.$notification.success({
+                      message: '欢迎',
+                      description: `${ timeFix() }，欢迎回来`
+                    })
+                  }
                })
              } else {
                that.$router.go(-1)