前端用MD5与base64一起加密密码

一般后台项目会遇到登录时对密码进行加密的需求,可能会用到md5.我们需要先安装md5

cnpm i md5 --save  //安装md5
import md5 from "js-md5"; //vue组件里引入

然后在vue组件里引入,最后在登录页直接md5对密码二次加密即可,注意是要使用两次哦

   this.$refs.loginForm.validate(valid => {
    
    
        this.$refs.loginForm2.validate(valid2 => {
    
    
          if (valid && valid2) {
    
    
            this.loading = true;
            let password = this.loginForm.userPassword;
            //md5进行密码二次加密
             let passwordMd5 = md5(password);
             let pwd = md5(passwordMd5);    
            const obj = {
    
    
              userName: this.loginForm.userName,
              userPassword: pwd
            };
            apiLogin(obj)
              .then(res => {
    
    
                this.dealLoginMessage(res);
                this.loading = false;
              })
              .catch(e => {
    
    
                let str = "请求失败";
                if (e.toString().includes("timeout of")) {
    
    
                  str = "请求超时";
                } else if (e.toString().includes("Network Error")) {
    
    
                  str = "服务器未响应,请检查网络";
                }
                this.$Message.error(str);
                this.loading = false;
              });
          }
        });
      });

如果后端需要md5的base64加密格式,我们还需要安装使用crypto

cnpm i crypto --save  //安装crypto
let crypto = require("crypto.js"); //vue组件里引入

然后vue组件引入使用

    this.$refs.loginForm.validate(valid => {
    
    
        this.$refs.loginForm2.validate(valid2 => {
    
    
          if (valid && valid2) {
    
    
            this.loading = true;
            let password = this.loginForm.userPassword;
            let pwd = crypto.md5(password, "base64");

            const obj = {
    
    
              userName: this.loginForm.userName,
              userPassword: pwd
            };
            apiLogin(obj)
              .then(res => {
    
    
                this.dealLoginMessage(res);
                this.loading = false;
              })
              .catch(e => {
    
    
                let str = "请求失败";
                if (e.toString().includes("timeout of")) {
    
    
                  str = "请求超时";
                } else if (e.toString().includes("Network Error")) {
    
    
                  str = "服务器未响应,请检查网络";
                }
                this.$Message.error(str);
                this.loading = false;
              });
          }
        });
      });

猜你喜欢

转载自blog.csdn.net/qq_37635012/article/details/128664139