小Demo：登录页使用MD5给密码加密，node模拟后台，体验前后端交互

编写此demo使用vscode开发工具,目录结构如下图:

模拟前后端交互

使用node模拟后台

在index.js文件中编写node:

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use("/", express.static("public"));
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);

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

app.listen(8989);

使用Postman测试设置的接口,成功返回值如下图:

前端调用接口

index.html中编写代码:

<div id="app">
    <div>
        <input type="text" v-model="loginUserInfo.userName" placeholder="请输入用户名">
    </div>
    <div>
        <input type="password" v-model="loginUserInfo.passWord" placeholder="请输入密码">
    </div>
    <div>
        <input type="button" @click="userInfo" value="登录">
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                loginUserInfo: {
                    userName: "",
                    passWord: ""
                }
            }
        },
        methods: {
            async userInfo() {
                let {
                    data
                } = await axios.post("http://localhost:8989/login", this.loginUserInfo)
                if (data.isSuccess) {
                    alert("登录成功")
                } else {
                    alert("用户名或密码错误")
                }
            }
        },
    })
</script>

如上便是简单的前后端交互demo

使用MD5加密密码

虽然页面上看不到密码,但在控制台是可以看到输入的密码,这样就非常不安全.

所以,此处采用MD5库来对密码加密,增加安全性

初步加密

首先,先将MD5库cdn引入进来,然后进行加密设置:

<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.js"></script>

<script>
    methods: {
        async userInfo() {
            //将输入的密码加密,返回给passWord,提交给后台
            this.loginUserInfo.passWord = md5(this.loginUserInfo.passWord)
            let {data}= await axios.post("http://localhost:8989/login", this.loginUserInfo)
            if (data.isSuccess) {
                alert("登录成功")
            } else {
                alert("用户名或密码错误")
            }
        }
    },
</script>

当输入有户名和密码后,密码就会被加密,如下图:

可以使用在线MD5进行验证,代码编写是否成功
注意:此时的提交的密码已经换成加密后的了,这样与后台参数不符,即使输入正确,也会弹出"用户名或密码错误",后续会有解决方案.

深度加密

为防止密码为简单的数字,如 "123123",这样有可能被别人破解,因此需要对加密进一步处理:
index.html文件中方法改为:

methods: {
    //字符翻转
    reversePwd(str) {
        return str.split('').reverse().join('')
    },
    async userInfo() {
        //多重嵌套，深层加密
        let md5PWD = md5(this.reversePwd(md5(this.reversePwd(this.loginUserInfo.passWord))))
        let res = await axios.post("http://localhost:8989/login", {
            userName: this.loginUserInfo.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
    });
  }
});

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

代码写的一般,水平有限,尽力而为,欢迎指正.