实现修改密码的功能(Vue+elementUI)

<!-- 修改密码界面 -->
    <el-dialog title="重置密码" width="30%" :visible.sync="cgpwdVisible" :close-on-click-modal="false"
      :modal-append-to-body='false' @close="handleCloseDialog">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" label-position="right">
        <el-form-item label="旧密码:" prop="oldpassword">
          <el-input v-model="dataForm.oldpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword" label-width="100px">
          <el-input v-model="dataForm.newpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkpassword" label-width="100px">
          <el-input v-model="dataForm.checkpassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 5px;">
        <el-button type="primary" @click.native="handleUpdataPw">确认</el-button>
        <el-button @click.native="cgpwdVisible = false" type="danger">取消</el-button>
      </div>
    </el-dialog>
    
    //属性和方法
    data() {
        //定义的旧密码验证是否成功和新密码输入的是否一致
        var checkOldPw = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入旧密码'));
            }
            this.checkIsRepeat(value, function () { //checkIsRepeat用来调用接口验证用户输入的旧密码是否为数据库存储的密码一致,一致你才可以修改密码
              callback();
            }, function (err) {
              callback(new Error(err.message));
            })
          };
          var checkNewPw = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请再次输入密码'));
            }
            if (this.dataForm.newpassword !== value) {
              callback(new Error("密码不一致"));
            } else {
              callback()
            }
          };
        return {
            cgpwdVisible: false,
            dataForm: {
              oldpassword: '',
              newpassword: '',
              checkpassword: ''
            },
            dataFormRules: {
              oldpassword: [{
                required: true,
                validator: checkOldPw,
                trigger: 'blur'
              }],
              newpassword: [{
                required: true,
                message: '请输入新密码',
                trigger: 'blur'
              }],
              checkpassword: [{
                required: true,
                validator: checkNewPw,
                trigger: 'blur'
              }]
            },        
        },
        method() {
            //关闭时候清空表单
            handleCloseDialog() {
            this.$refs.dataForm.resetFields();
          },
          // 校验旧密码
          checkIsRepeat(oldpw, success, error) {
            var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
            if (!oldpw) return;
            var params = {
              oldpassword: oldpw,
              userId: userId
            }
            ajaxNewGet(getNativePath2() + "user/checkSysUserPwd", params, function (res) {   //设置dataType: 'json',希望服务器返回的数据类型
              if (res.code == 200) {
                success()
              } else {
                error(res)
              }
            }, function (err) {
              console.log("err", err)
            })
          },
          //修改密码,调用接口更改
          handleUpdataPw() {
            var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
            var formData = new FormData();
            formData.append("suId", userId);
            formData.append("suPwd", this.dataForm.newpassword);
            var that = this;
            this.$refs.dataForm.validate((valid) => {
              if (!valid) return;
              ajaxPostForm(getNativePath2() + "user/updSuPwd", formData, res => {  //以formData格式传给后端,其他属性可以关掉,设置这俩个很重要:processData: false, contentType: false,
                if (res.code == '200') {
                  this.$message.success(res.message)
                  this.cgpwdVisible = false;
                  this.$refs.dataForm.resetFields();
                  setTimeout(function () {
                    that.quitHander()
                  }, 1000)
                } else {
                  this.$message.error(res.message)
                }
              }, err => {
                console.log("err", err)
              })
            })
          },          
        }
    }
  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue ElementUI后台管理权限框架是一种基于Vue.jsElementUI的后台管理系统的权限控制解决方案。它主要用于对后台管理系统中的用户角色和权限进行管理和控制。 该权限框架提供了一种简单、灵活的方式来实现用户权限控制。它通过定义角色和权限的方式来管理系统中的用户,可以根据不同的角色给予用户不同的权限。例如,管理员具有最高权限,可以对系统中的所有功能进行操作;而普通用户只能进行部分功能的操作。 在实际应用中,可以通过在路由配置中定义不同的角色和权限来进行权限控制。通过使用Vue Router的导航守卫功能以及ElementUI的菜单组件,可以在用户登录后根据其角色和权限动态生成对应的菜单和路由。 在实现权限控制时,可以将角色和权限的配置存储在后端数据库中,并通过接口提供给前端进行调用。前端可以通过与后端的交互来获取用户的角色和权限,从而进行动态的权限控制。 除了角色和权限控制外,该权限框架还提供了其他功能,如登录、注销、密码修改等。它还支持对菜单的动态展示与隐藏,可以根据用户的权限来显示对应的菜单项。 总体而言,Vue ElementUI后台管理权限框架是一种方便、灵活的权限控制解决方案,可以帮助开发者快速构建权限管理功能,提高开发效率,同时保障系统的安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值