SpringBoot项目实战杂货铺——登录注册界面怎么写好看？SpringSecurity怎么玩？（七）

那么本次实战项目杂货铺的更新，博主不仅更新了前端界面，还将SpringSecurity加入了项目中，针对请求和静态资源的过滤、拦截、登录界面中的记住我、以及密码加密验证等等。下面将我们就来看看前端界面的制作以及SpringSecurity究竟怎么玩。

源码已分享至GitHub，需要源码的同学可以私聊博主免费获取。

咱们先来看看前端界面有没有GET到你的喜欢???

关于前端

这个不用多说了，一点一滴慢慢调，就可以达到上面的效果啦。建议大家多多练习，写熟练了以后就能游刃有余，随心所欲，直到调到自己满意为止。

关于SpringSecurity在项目中的应用

SpringSecurity的作用简单来说就是认证、授权、攻击防护。此处还没有加入角色以及资源菜单，再后续更新中会加上。

在未登录情况下放行哪些请求，拦截哪些请求，以及在登录界面的记住我的功能，加密验证怎么实现？那么接下来我们来看看SpringSecurity怎么玩。

一、界面请求拦截

顾名思义，拦截就是将请求拦截了，哪种情况下会拦截？既在未登录的情况下，SpringSecurity如何拦截？看看下面这段代码：

        // 需要认证的请求地址
        http.authorizeRequests()
                .antMatchers("/store/loginPage").permitAll() // 放开登录页面
                .antMatchers("/login/getNextIdNumber","/login/checkCode","/login/layupload","/login/register").permitAll() // 放开注册页面的账号生成、邮件发送、上传头像、注册功能
                .antMatchers("/**/**.js","/layui/**","/picture/**").permitAll() // 静态资源文件可访问
                .anyRequest().authenticated() // 任何请求都需认证以后才能访问
        ;

由如上代码快，在我们引入了对应的依赖后，就可以使用如上的方法，由注释可以看出，我们首先是对所有的请求进行一个请求认证，然后再放开部分请求。

permitAll()方法就是将此请求放行，要放行的不仅有登录界面，还有登录界面的请求，注册界面的请求，以及我们界面的静态资源。

那么如此拦截有什么效果呢？效果就是当你未登录的情况下，访问任何内部请求都会统一跳转到登录界面，登录以后方可进入主页。

结果就是，如果你没登陆，要么登录进入系统，要么注册以后通过登录进入系统。

二、登录认证

        // 配置登录请求相关内容
        http.formLogin()
                .usernameParameter("idNumber") // 登录表单的账号name属性值，默认username。可自行通过此语句配置
                .passwordParameter("password") // 登录表单的密码name属性值，默认password。可自行通过此语句配置
                .loginPage("/store/loginPage") // 当用户未登录的时候默认跳转到登录界面
                .loginProcessingUrl("/loginSys") // 对应登录表单上的action属性值
                .defaultSuccessUrl("/store/homepage",true) // 登录成功后，响应重定向的位置

        ;

<form action="/loginSys" method="POST" class="layui-form">
......
</form>

由以上代码块，相信通过注释就可以看出来他们所代表的意思，loginPage就是未登录时我们要请求的地址，loginProcessingUrl对应的就是以上HTML代码中form表单上的action属性，defaultSuccessUrl登录认证成功后我们跳转的界面请求。

当我们登录失败的时候，弹出提示：

三、登录界面记住我操作

记住我勾选以后有什么效果呢？就是当你将网页关闭以后，不用再次登录，只要你以前登录过，就无需再次输入密码进行登录。

        // remember-Me操作
        http.rememberMe()
                //.rememberMeParameter("") // 记住我参数名，默认是remember-me
                .tokenValiditySeconds(60*60) // 设置记住我的时间，单位是秒，默认是7天
                .tokenRepository(persistentTokenRepository)
                .userDetailsService(userLoginService)
        ;

<input type="checkbox" id="remember-me" name="remember-me" title="记住我" lay-skin="primary">

由图上代码可以看出，点击记住我的默认属性值是remember-me，可通过rememberMeParameter自行设置，而tokenValiditySeconds的意思就是记住你的时间，代码中的60*60就是记住你一个小时，这一个小时之内免登录。

四、退出操作

        // 配置退出登录的请求
        http.logout()
                .invalidateHttpSession(true) // 回收HttpSession对象，回收之前调用HttpSession.invalidate(),默认true
                .clearAuthentication(true) // 退出之前清空Security记录的用户登录标记，默认true
                // .addLogoutHandler() // 增加退出处理器
                .logoutSuccessUrl("/store/loginPage") // 退出后回到登录界面
                .logoutUrl("/logout");

<a href="/logout">退出</a>

如以上代码的注释。

五、密码加密解密操作

在使用SpringSecurity认证的时候，必须有一个对密码的加密解密的操作，那么此处我们是针对密码做一个MD5的加密认证操作，那么在注册存储密码的时候，我们就需要将密码通过SpringSecurity的加密方式存储密码。

我们来看看数据库中锁存储的值：

代码展示：

// 密码加密方式：MD5
        try {
            MessageDigest digest = MessageDigest.getInstance("MD5");
            byte[] tmp = digest.digest(user.getPassword().getBytes());

            // 转换为以十六进制的无符号整数形式，用一个整数参数的字符串表示形式
            // 可自行定义，但是要与SpringSecurity中的密码校验方式相同
            StringBuilder passWord = new StringBuilder("");
            for(byte b : tmp){
                String s = Integer.toHexString(b & 0xFF);
                if(s.length() == 1){
                    passWord.append("0");
                }
                passWord.append(s);
            }

            user.setPassword(passWord.toString()); // 存入对象，准备执行插入操作

        } catch (NoSuchAlgorithmException e) {
            logger.info("密码加密失败...");
            e.printStackTrace();
        }

六、主页时分秒展示

前端分时展示如图：

代码如下：

    function timeStampString() {
        var dateTime = new Date();
        var show_day = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        var day = dateTime.getDay();
        var year = dateTime.getFullYear();
        var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
        var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate();
        var hour = dateTime.getHours() < 10 ? "0" + dateTime.getHours() : dateTime.getHours();
        var minute = dateTime.getMinutes() < 10 ? "0" + dateTime.getMinutes() : dateTime.getMinutes();
        var second = dateTime.getSeconds() < 10 ? "0" + dateTime.getSeconds() : dateTime.getSeconds();

        if(day == 0){
            // 周日
            day = 7;
        }

        return  year + "年" + month + "月" + date + "日   " + hour + ":" + minute + ":" + second + "  " + show_day[day-1];
    }

    $(function () {
        setInterval(function () {
            var dateFormat = timeStampString();
            $('#nowTime').text(dateFormat .toLocaleString())
        },1000)
    })

<span id="nowTime"></span>

此时间会随着每秒的变动而变动。

杂货铺更多的功能期待你的挖掘。

最后再提一下，源码已上传至GitHub，有需要的同学可以私聊博主免费分享给大家。