vue项目之使用md5加密密码

原创已于 2023-07-24 10:51:32 修改 · 4.2k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Vue

MD5

于 2023-07-24 10:46:41 首次发布

文章介绍了MD5作为一种信息摘要算法在计算机安全中的作用，特别是在Vue项目中，如何通过安装和引用js-md5库进行MD5加密。示例展示了在全局和局部环境下使用MD5加密密码，并在注册接口中应用该方法，确保数据传输的安全性。

MD5概念：

MD5全称为信息-摘要算法（哈希算法），是计算机安全领域的散列函数，用于确保消息的完整性。另外摘要算法还有SHA1，具体请度娘。MD5是一种单向加密，它的加密不可逆，它将任意长度的字符串，经过算法计算后生成固定长度的数据，一般为16位表示。这种加密方式最简单同时也最直接。

vue项目使用：

安装：

npm install --save js-md5

引用：

1. 局部使用：

import md5 from 'js-md5'

md5('MD5加密')

2. 全局使用：

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

this.$md5('MD5加密')

案例：

一般在向后端传递密码的时候需要用MD5加密一下，后端的话也是用MD5解密，我这里直接是在全局定义了MD5，因为本次这个项目有很多接口需要传递密码，所以定义全局比较方便，上面我已经把局部和全局的两种方式都已经列出来了。

  registerClick() {
      this.$refs.ruleFormRef.validate(async (valid) => {
        try {
          if (!valid) return false;
          let parameter = {
            microservices: "lmall/login/supplier/merchant/signUp",
            mobile: this.ruleForm.phone,
            captcha: this.ruleForm.code,
            // MD5加密
            password: this.$md5(this.ruleForm.checkPass),
            nickname: this.ruleForm.name,
          };
          let request = await this.$PostData(parameter);
          if (request.ret === 200) {
            this.$message.success("注册成功");
            this.$router.go(0);
          }else{
            this.$message.warning(request.msg)
          }
        } catch (error) {
          console.log(error);
        }
      });
    },