用户密码功能更新

whyczyk

2021-07-01 17f1e367e8d90cdde9e857d68bed77c57476d03d

用户密码功能更新

 src/components/PageHeader.vue

@@ -12,27 +12,59 @@
                <span class="avatar-icon">
                    <i class="el-icon-user-solid"></i>
                </span>
                <span class="avatar-text">
                    {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown @command="commandClick">
                    <span class="avatar-text">
                        {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </div>

        <!-- 密码修改 -->
        <el-dialog title="密码修改" width="400px" :visible.sync="pwd.show" :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <pwd-change v-if="pwd.show" :visible.sync="pwd.show"></pwd-change>
        </el-dialog>
    </div>
</template>

<script>
    import PwdChange from "@/components/PwdChange";
    export default {
        components: {
            PwdChange,
        },
        data() {
            return {
                username: this.$store.state.user.username
                username: this.$store.state.user.username,
                pwd: {
                    show: false,
                },
            }
        },
        methods: {
            logout () {
            logout() {
                this.$store.dispatch('setLogin');
                this.$router.push({path: '/login'});
            }
                this.$router.push({
                    path: '/login'
                });
            },
            passwordChange() {
                this.pwd.show = true;
            },
            commandClick(name) {
                switch (name) {
                    case "passwordChange":
                        this.passwordChange();
                        break;
                    default:
                        this.$layer.msg('该功能暂未开放！');
                        break;
                }
            },
        }
    }
</script>

 src/components/PwdChange.vue

New file
@@ -0,0 +1,168 @@
<template>
    <div class="params-container">
        <el-form ref="ruleForm" size="mini" label-position="top" :model="params" :rules="rules" class="params-dialog">
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input type="password" v-model="params.oldPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input type="password" v-model="params.newPwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="enPwd">
                <el-input type="password" v-model="params.enPwd"></el-input>
            </el-form-item>
            <div class="form-footer">
                <three-btn @click="submitForm">确定</three-btn>
                <three-btn @click="close">取消</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
    import ThreeBtn from './ThreeBtn.vue';
    import {
        validatePassword,
        updatePassword
    } from '@/pages/user/js/api'
    export default {
        components: {
            ThreeBtn
        },
        name: "PwdChange",
        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            let validatePass = (rule, value, callback) => {
                let pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}');
                if (pwdRegex.test(value)) {
                    callback();
                } else {
                    callback(new Error('您的密码复杂度太低（密码中必须包含字母、数字、至少6位)'));
                }
            };
            let validateOldPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('不能为空'));
                } else {
                    //调用封装了的异步效验方法，
                    let postData = {
                        id: this.$store.state.user.uid,
                        password: value
                    }
                    validatePassword(postData).then(res => {
                        console.log(res)
                        if (res.data) {
                            callback();
                        } else {
                            callback("原始密码错误！");
                        }
                    });
                }
            };
            return {
                params: {
                    oldPwd: "",
                    newPwd: "",
                    enPwd: ""
                },
                rules: {
                    oldPwd: [{
                        required: true,
                        validator: validateOldPassword,
                        trigger: 'blur'
                    }],
                    newPwd: [{
                            required: true,
                            message: '不能为空',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
                    ],
                    enPwd: [{
                            required: true,
                            message: '不能为空',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
                    ],
                },
            }
        },
        methods: {
            // 提交表单
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    // 校验通过
                    if (valid) {
                        if (this.params.newPwd === this.params.enPwd) {
                            this.confirmChangeUserPwd(this.params.newPwd);
                        } else {
                            // 关闭等待框
                            this.$layer.close(loading);
                            this.$layer.msg("新密码和确认密码不一致");
                        }
                    } else {
                        this.$layer.msg('存在校验未通过的数据！');
                        return false;
                    }
                });
            },
            // 确认修改用户密码
            confirmChangeUserPwd(pwd) {
                this.$confirm("确认修改用户密码", '系统提示', {
                    type: 'warning',
                }).then(() => {
                    this.updateUserPwd(pwd);
                }).catch(() => {});
            },
            updateUserPwd(pwd) {
                let postData = {
                    id: this.$store.state.user.uid,
                    password: pwd
                }
                updatePassword(postData).then(res => {
                    if (res.data) {
                        alert("密码更新成功,请重新登录！");
                        this.$router.push("/login");
                    } else {
                        this.$layer.msg("密码更新失败");
                    }
                }).catch(error => {
                    console.log(error);
                    // 关闭等待框
                    this.$layer.close(loading);
                });
            },
            close() {
                this.$emit("update:visible", false);
            }
        }
    }
</script>

<style scoped>
    .params-container {
        padding: 8px;
        background-color: #ececec;
    }

    .form-footer {
        margin-top: 16px;
        margin-bottom: 16px;
        text-align: right;
    }

    .form-footer .three-btn {
        margin-left: 12px;
    }
</style>

 src/pages/user/js/api.js

@@ -169,6 +169,17 @@
}

/**
 * 重置密码
 */
export const resetPassword = (data) => {
  return axios({
    method: "PUT",
    url: "/user/resetPassword",
    params: data,
  });
}

/**
 * 通过角色id获取用户信息
 */
export const getUserByRoleId = (data) => {
@@ -224,4 +235,26 @@
    params: params,
    data: data,
  });
}

/**
 * 验证密码
 */
export const validatePassword = (params) => {
  return axios({
    method: "GET",
    url: "/user/validatePassword",
    params: params,
  });
}

/**
 * 修改密码
 */
export const updatePassword = (params) => {
  return axios({
    method: "PUT",
    url: "/user/updatePassword",
    params: params,
  });
}

 src/pages/user/list.vue

@@ -60,9 +60,10 @@
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
          <el-table-column fixed="right" label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="success" size="mini" @click="restPassword(scope.row)">重置密码</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
@@ -90,7 +91,8 @@
    getJobs,
    searchUser,
    freezeUser,
    delUser
    delUser,
    resetPassword
  } from './js/api';
  import AddUser from './dialog/addUser.vue';

@@ -214,6 +216,27 @@
        this.userInfo = row;
        this.addDialog = true;
      },
      restPassword(row) {
        this.$confirm("确认重置改用户密码吗？", '系统提示', {
          type: 'warning',
        }).then(() => {
          let postData = {
            id: row.id
          }
          resetPassword(postData).then((res) => {
            if (res.data.code == 1) {
              this.$message({
                message: '重置密码成功！',
                type: 'success'
              });
              this.getList();
            }
          }).catch((err) => {
            console.log(err)
          });
        }).catch(() => {});

      },
      remove(row) {
        this.$confirm("确认删除该用户吗？", '系统提示', {
          type: 'warning',