Vue一个指令实现用户登录密码校验

效果演示：

使用场景：当删除或者修改等操作需要输入用户登录密码或者其他校验信息时使用。

Vue版本：Vue2,

组件库使用element-ui

指令代码：

javaScript 复制代码

/**
 * 身份验证
 */
import {
  MessageBox,
  Message,
} from 'element-ui'

// 密码验证接口
import {
  authentication
} from '@/api/login';

export default {
  bind: function (el, binding) {
    // 获取传递进来的参数
    const interceptor = binding.value || {}

    el._custclick = async (event) => {
      let result = await authenticationHttp();
      if (result) {
        if (interceptor.data) {
          interceptor.handler && interceptor.handler(interceptor.data)
        } else {
          interceptor.handler && interceptor.handler(event)
        }
      }
    }

    el.addEventListener('click', el._custclick)
  },
  unbind: function (el, binding) {
    el.removeEventListener('click', el._custclick);
    delete el._custclick;
  }
};

function authenticationHttp() {
  return new Promise((resolve, reject) => {
    MessageBox.prompt('请输入管理员密码', '提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        modal: false,
        inputType: "password",
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '管理员密码不能为空',
        customClass: "authentication-message-box",
        beforeClose: (action, instance, done) => {
          if (action !== 'confirm') {
            done();
          } else {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '验证中...';

            setTimeout(() => {
              authentication({
                password: instance._data.inputValue
              }).then(res => {
                if (!res.data) {
                  Message({
                    message: "管理员密码不正确！",
                    type: 'error'
                  })
                } else {
                  instance._data.inputValue = "true"
                  done();
                }
              }).finally(() => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = '确定';
              })
            }, 1500);

          }
        }
      })
      .then(({
        value
      }) => {
        resolve(value === "true" ? true : false);
      }).catch(() => {
        resolve(false);
      });
  });
}

使用

不需要传递参数：

html 复制代码

 <el-button type="danger" plain icon="el-icon-delete" size="mini" 
          v-authentication="{ handler: handleDelete }">删除</el-button>

需要传递参数： data: scope.row就是传递的参数

html 复制代码

<el-button size="mini" type="text" icon="el-icon-delete"
  v-authentication="{data: scope.row, handler: handleDelete }">删除</el-button>

js 复制代码

   /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;

     this.$modal
            .confirmHtml(
              '是否确认删除id为' + ids +'的数据项？'
            )
            .then(function () {
              return delEvidence(ids);
            })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
    },