前端JQuery ajax实现Cookie以及MD5加盐加密

前言

本文展示一个基于Spring MVC以及静态HTML页面通过JQuery ajax 实现登录的小Demo（保存Cookie、密码加盐加密）
代码很容易，逻辑也很简单，记录一下。

案例代码

html部分

<form class="login-form" onkeydown="if(event.keyCode==13){return false;}">
        <h3 class="form-title">登录</h3>
        <div class="alert alert-danger display-hide ">
            <button class="close" data-close="alert"></button>
            <span id="errormsg">没有输出任何账号密码 </span>
        </div>
        <div class="form-group">
            <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
            <label class="control-label visible-ie8 visible-ie9">账号</label>
            <div class="input-icon">
                <i class="fa fa-user"></i>
                <input class="form-control placeholder-no-fix" type="text"
                       autocomplete="off" placeholder="请输入账号" id="username" name="username"/></div>
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">密码</label>
            <div class="input-icon">
                <i class="fa fa-lock"></i>
                <input class="form-control placeholder-no-fix" type="password"
                       autocomplete="off" placeholder="请输入密码" id="password" name="password"/></div>
        </div>
        <input type="hidden">
        <div class="form-actions">
            <label class="rememberme mt-checkbox mt-checkbox-outline">
                <input type="checkbox" id="remember"/> 记住我
                <span></span>
            </label>
            <button type="button" class="btn green pull-right" id="btn_submit"> 登录</button>
        </div>

JS部分

<script>

    $(document).ready(function () {
        //判断是否存在Cookie
        if ($.cookie("remember")) {
            $("#username").val($.cookie("username"));
            $("#password").val($.cookie("password"));
            $("#remember").prop("checked", true);
        }
    });

    $("#btn_submit").click(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        //盐值
        var salt = "";

        if (username == "" || password == "") {
            $(".alert-danger").show();
            $("#errormsg").text("没有输出任何账号密码 ");
            return;
        }

        if (password != $.cookie("password")) {
            //修改为 同步
            $.ajaxSettings.async = false;
            $.get("/salt?username=" + username, function (data, status) {
                if (status == "success") {
                    salt = data;
                }
            });
            $.ajaxSettings.async = true;
            //MD5 加密
            password = $.md5(password);
            password = $.md5(password + salt);
        }
        //ajax 请求
        $.ajax({
            // 请求类型
            type: "post",
            // 请求URL
            url: "/login",
            // 请求参数
            data: {
                username: username,
                password: password
            },
            // 数据返回类型
            dataType: "json",
            // 默认为true 异步请求
            async: true,
            // 成功返回的结果(响应)
            success: function (data) {
                if (data == "1") {
                    // 判断 记住密码框是否选中
                    if ($("#remember").prop("checked")) {
                        $.cookie("username", username, {expired: 7});
                        $.cookie("password", password, {expired: 7});
                        $.cookie("remember", true, {expired: 7});
                    } else {
                        $.removeCookie("username");
                        $.removeCookie("password");
                        $.removeCookie("remember");
                    }
                    window.location.href = "index";
                }
                if (data == "0") {
                    $(".alert-danger").show();
                    $("#errormsg").text("账号或密码错误 ");
                }
            }
        });
    });
</script>

后端部分代码

/**登录控制器
 * @author ACI
 * @Title: LoginController
 * @ProjectName TestShop
 * @Description: TODO
 * @date 2019/1/11 21:54
 */
@Controller
public class LoginController {

    @Autowired
    private LoginService loginService;

    /**
     * 跳转到登录页面
     *
     * @return
     */
    @GetMapping(value = "login")
    public String login() {

        return "login";
    }

    @ResponseBody
    @PostMapping(value = "login")
    public String login(User user, HttpServletRequest request) {

        User login = loginService.login(user);

        // 登陆失败
        if (login == null) {
            return "0";
        }
        //成功
        else {
            //保存Session
            request.getSession().setAttribute("login", login);
            return "1";
        }
    }
}

/**
 * 盐值管理
 * @author ACI
 * @Title: SaltManagerController
 * @ProjectName TestShop
 * @Description: TODO
 * @date 2019/1/15 16:35
 */
@Controller
public class SaltManagerController {

    @Autowired
    private LoginService loginService;

    @ResponseBody
    @GetMapping(value = "salt")
    public String getSaltByName(String username) {

        //获取盐值
        String saltByName = loginService.getSaltByName(username);

        System.out.println(saltByName);

        return saltByName;
    }
}

附：

JQuery.Cookie.js

/*!
 * jQuery Cookie Plugin v1.3.1
 */
(function ($, document, undefined) {

    var pluses = /\+/g;

    function raw(s) {
        return s;
    }

    function decoded(s) {
        return unRfc2068(decodeURIComponent(s.replace(pluses, ' ')));
    }

    function unRfc2068(value) {
        if (value.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape
            value = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }
        return value;
    }

    function fromJSON(value) {
        return config.json ? JSON.parse(value) : value;
    }

    var config = $.cookie = function (key, value, options) {

        // write
        if (value !== undefined) {
            options = $.extend({}, config.defaults, options);

            if (value === null) {
                options.expires = -1;
            }

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = config.json ? JSON.stringify(value) : String(value);

            return (document.cookie = [
                encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path ? '; path=' + options.path : '',
                options.domain ? '; domain=' + options.domain : '',
                options.secure ? '; secure' : ''
            ].join(''));
        }

        // read
        var decode = config.raw ? raw : decoded;
        var cookies = document.cookie.split('; ');
        var result = key ? null : {};
        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = decode(parts.join('='));

            if (key && key === name) {
                result = fromJSON(cookie);
                break;
            }

            if (!key) {
                result[name] = fromJSON(cookie);
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function (key, options) {
        if ($.cookie(key) !== null) {
            $.cookie(key, null, options);
            return true;
        }
        return false;
    };

})(jQuery, document);

JQuery.md5.js

/*!
 * jQuery Cookie Plugin v1.3.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function ($, document, undefined) {

    var pluses = /\+/g;

    function raw(s) {
        return s;
    }

    function decoded(s) {
        return unRfc2068(decodeURIComponent(s.replace(pluses, ' ')));
    }

    function unRfc2068(value) {
        if (value.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape
            value = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }
        return value;
    }

    function fromJSON(value) {
        return config.json ? JSON.parse(value) : value;
    }

    var config = $.cookie = function (key, value, options) {

        // write
        if (value !== undefined) {
            options = $.extend({}, config.defaults, options);

            if (value === null) {
                options.expires = -1;
            }

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            value = config.json ? JSON.stringify(value) : String(value);

            return (document.cookie = [
                encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path ? '; path=' + options.path : '',
                options.domain ? '; domain=' + options.domain : '',
                options.secure ? '; secure' : ''
            ].join(''));
        }

        // read
        var decode = config.raw ? raw : decoded;
        var cookies = document.cookie.split('; ');
        var result = key ? null : {};
        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = decode(parts.join('='));

            if (key && key === name) {
                result = fromJSON(cookie);
                break;
            }

            if (!key) {
                result[name] = fromJSON(cookie);
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function (key, options) {
        if ($.cookie(key) !== null) {
            $.cookie(key, null, options);
            return true;
        }
        return false;
    };

})(jQuery, document);