js-md5前后端使用

登录使用MD5加密密码,node后台同步

    • vue中使用
    • 后端验证

vue中使用

  • npm 下载
npm install --save js-md5
  • main.js 引入
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
  • 使用
this.$md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3
  • 深度加密

注意:为防止密码为简单的数字,如 “123123”,这样有可能被别人破解,因此需要对加密进一步处理:

如下例登录:

methods: {
    //字符翻转
    reversePwd(str) {
        return str.split('').reverse().join('')
    },
    async userInfo() {
        //多重嵌套,深层加密
        let md5PWD = this.$md5(this.reversePwd(this.$md5(this.reversePwd(this.passWord))))
        let res = await axios.post("http://localhost:8000/login", {
            userName: this.userName,
            passWord: md5PWD
        })
        if (res.data.isSuccess) {
            alert("登录成功")
        } else {
            alert("用户名或密码错误")
        }
    }
}

后端验证

将index.html中的加密方法同样使用在node后台中,这样就可以是前后端参数值保持一致,页面上就可以请求成功了.
index.js文件中安装npm i js-md5,并更改如下代码

const MD5 = require("js-md5");

//字符翻转
function reversePwd(str) {
  return str
    .split("")
    .reverse()
    .join("");
}

app.post("/login", (require, response) => {
  let { userName, passWord } = require.body;
  let str = MD5(reversePwd(MD5(reversePwd("123123"))));
  if (userName === "admin" && passWord === str) {
    response.json({
      isSuccess: true
    });
  } else {
    response.json({
      isSuccess: false
    });
  }
});

好处:这样加密后,就不会存在密码被别人看到了,即使是后台的开发人员,大大提高了密码的安全性.

你可能感兴趣的:(vue.js,javascript)