spring项目篇13 --- 网上商城之登陆注册

首先我们这次使用的是jwt来实现的登陆认证，首先看一下需要引入的jar包

 尤其是commons-codec这个包，一定要引入，否则会报binary那个包的错误，因为找不到方法，另外不要使用那个结尾是20... 就是那个最新的这个包，会出错，找了好半天这个错误。。。

首先说一下基本思想，就是通过拦截器将我们的login以及rgister与静态文件放行，其余的检测是否携带token，并对token进行检测，合格之后在进行放行。

接下来直接看源码

首先看一下我们的spring配置补充的，因为没有使用redis，因此注释掉，补充了一个拦截器，并将静态文件做了修改

    <!--配置注解扫描-->
    <context:component-scan base-package="com.yang" />
    <!--因为配置了静态文件，spring不会自动为我们加载HandlerMapping与HandlerAdapter，因此需要进行初始化-->
    <mvc:annotation-driven />

    <mvc:default-servlet-handler />
    <!--配置静态文件-->
    <mvc:resources location="/static" mapping="/static/**" />
<!--    <mvc:resources location="/static/js" mapping="/js/**" />-->
<!--    <mvc:resources location="/static/css" mapping="/css/**" />-->

    <!--上传文件配置-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
        <property name="maxUploadSize" value="5120" />
    </bean>
    <!--配置视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/page/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <!--配置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <!--拦截所有请求-->
            <mvc:mapping path="/" />
            <!--不拦截登陆-->
            <mvc:exclude-mapping path="/login" />
            <!--不拦截注册-->
            <mvc:exclude-mapping path="/register" />
            <!--不拦截静态文件-->
            <mvc:exclude-mapping path="/static/**" />
            <!--指定我们的拦截器-->
            <bean class="com.yang.interceptor.LoginInterceptor" />
        </mvc:interceptor>
    </mvc:interceptors>

虽然配置了静态文件访问，按照理论来讲会实现我们的基地·既定的计划，静态文件直接迁移static里面查找，但是会报错404，找不到，因此在web.xml中将这个路径不再使用我们指定的拦截器，而是使用默认的，问题解决。

    <!--  设置静态文件访问  -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/static/**</url-pattern>
    </servlet-mapping>

看一下我们的token类

package com.yang.util;

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class TokenUse {
    // 设置过期时间
    private static final long overDeuTime = 1440 * 60 * 1000;

    // 设置秘钥
    private static final String tokenSecret = "fde35b32-0f47-46be-ae2a-49bcb7ed7d7f";

    // 生成token
    public static String sign(String username, Integer userId) {
        // 设置过期时间
        Date data = new Date(System.currentTimeMillis() + overDeuTime);
        // 使用token私钥加密
        Algorithm algorithm = Algorithm.HMAC256(tokenSecret);
        // 设置头部信息
        Map<String, Object> requestHeader = new HashMap<>(2);
        requestHeader.put("Type", "Jwt");
        requestHeader.put("alg", "HS256");
//        long dt = new Date().getTime();
        // 返回带有用户信息的签名
        try{
            return JWT.create().withHeader(requestHeader)
                    .withClaim("username", username)
                    .withClaim("userId", userId)
                    .withExpiresAt(data)
                    .sign(algorithm);
        }catch (Exception e){
            System.out.println(e.getMessage());
            e.printStackTrace();
            return null;
        }
    }

    // 验证token是否正确，返回boolean值
    public static boolean tokenVerify(String token){
        try{
            Algorithm algorithm = Algorithm.HMAC256(tokenSecret);
            JWTVerifier verifier = JWT.require(algorithm).build();
            // 验证
            DecodedJWT decodedJWT = verifier.verify(token);
            return true;
        }catch (Exception e){
            e.printStackTrace();
            return false;
        }
    }

    // 获取登陆用户token中的用户ID
    public static int getUserID(String token){
        try{
            Algorithm algorithm = Algorithm.HMAC256(tokenSecret);
            JWTVerifier verifier = JWT.require(algorithm).build();
            DecodedJWT jwt = verifier.verify(token);
            return jwt.getClaim("userId").asInt();
        }catch (Exception e){
            return 0;
        }
    }
}

接下来看一下我们的拦截器

package com.yang.interceptor;

import com.yang.util.TokenUse;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginInterceptor implements HandlerInterceptor {
    @Override
    //当处理器方法执行之前调用
    //返回值: true  放行   false  不放行    就执行不了处理器方法
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("preHandle当处理器方法执行之前调用");
        response.setCharacterEncoding("utf-8");
        String token = request.getHeader("token");
        if(token != null){
            // 判断是否携带token，并进行验证
            return TokenUse.tokenVerify(token);
        }
        return false;
    }

    @Override
    //当处理器方法执行之后会自动调用调用
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("postHandle当处理器方法执行之后会自动调用调用");
    }

    @Override
    //请求处理完毕之后, 会调用
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("afterCompletion请求处理完毕之后,会调用");
    }
}

看一下我们的user控制器

package com.yang.controller;

import com.yang.domain.User;
import com.yang.service.IUserService;
import com.yang.util.TokenUse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

    @Autowired
    private IUserService iUserService;

    // 返回登陆页面
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public String login(){
        return "login";
    }

    // 返回注册页面
    @RequestMapping(value = "/register", method = RequestMethod.GET)
    public String register(){
        return "register";
    }

    // 用户登陆认证
    @ResponseBody
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login(String username, String password){
        User user = iUserService.get(username);
        if(user != null && user.getPassword().equals(password)){
            // 创建token
            String token = TokenUse.sign(username, user.getId());
            if(token != null){
                return token;
            }
        }
        return "fail";
    }

    // 用户登陆认证
    @ResponseBody
    @RequestMapping(value = "/register", method = RequestMethod.POST)
    public String register(User u){
        User user = iUserService.get(u.getUsername());
        if(user != null){
            return "exit";
        }
        boolean result = iUserService.save(u);
        if(result){
            return "ok";
        }else{
            return "fail";
        }
    }



}

接下来看一下login页面

<%--
  Created by IntelliJ IDEA.
  User: yangshixiong
  Date: 2020/1/27
  Time: 下午09:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户登陆中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min.css" rel="stylesheet">

    <!-- ionicons -->
    <link href="${pageContext.request.contextPath}/static/css/ionicons.min.css" rel="stylesheet">

    <!-- Simplify -->
    <link href="${pageContext.request.contextPath}/static/css/simplify.min.css" rel="stylesheet">

</head>

<body class="overflow-hidden light-background">
<div class="wrapper no-navigation preload">
    <div class="sign-in-wrapper">
        <div class="sign-in-inner">
            <div class="login-brand text-center">
                <i class="fa fa-database m-right-xs"></i> 用户 <strong class="text-skin">登陆</strong>
            </div>

            <form>
                <div class="form-group m-bottom-md">
                    <input type="text" id="username" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input type="password" id="password" class="form-control" placeholder="密码">
                </div>

                <div class="m-top-md p-top-sm">
                    <div href="#" id="login" class="btn btn-success block">登陆</div>
                </div>

                <div class="m-top-md p-top-sm">
                    <div class="font-12 text-center m-bottom-xs">没有账号?</div>
                    <a href="${pageContext.request.contextPath}/register" class="btn btn-default block">创建账号</a>
                </div>
            </form>
        </div><!-- ./sign-in-inner -->
    </div><!-- ./sign-in-wrapper -->
</div><!-- /wrapper -->

<a href="" id="scroll-to-top" class="hidden-print"><i class="icon-chevron-up"></i></a>

<!-- Jquery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.1.min.js"></script>

<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<!-- Slimscroll -->
<script src='${pageContext.request.contextPath}/static/js/jquery.slimscroll.min.js'></script>

<!-- Popup Overlay -->
<script src='${pageContext.request.contextPath}/static/js/jquery.popupoverlay.min.js'></script>

<!-- Modernizr -->
<script src='${pageContext.request.contextPath}/static/js/modernizr.min.js'></script>

<!-- Simplify -->
<script src="${pageContext.request.contextPath}/static/js/simplify/simplify.js"></script>
<script type="application/javascript">
    $(function () {
        $('#login').click(function () {
            let username = $('#username').val();
            let password = $('#password').val();
            console.log(username, password)
            if(username === "" || password === ""){
                alert("用户名或密码不能为空！");
                return false;
            }
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/login",
                data:{username,password},
                success:function (data) {
                    if(data === "fail"){
                        alert("用户名或密码有误，请修改！");
                        return false;
                    }
                    sessionStorage.setItem("token", data);
                },
                error:function (err) {
                    console.log(err);
                    alert("服务器异常，请稍后再试！")
                }
            })


        })
    })
</script>
</body>
</html>

register页面

<%--
  Created by IntelliJ IDEA.
  User: yangshixiong
  Date: 2020/1/23
  Time: 下午10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simplify Admin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min.css" rel="stylesheet">

    <!-- ionicons -->
    <link href="${pageContext.request.contextPath}/static/css/ionicons.min.css" rel="stylesheet">

    <!-- Simplify -->
    <link href="${pageContext.request.contextPath}/static/css/simplify.min.css" rel="stylesheet">

</head>

<body class="overflow-hidden light-background">
<div class="wrapper no-navigation preload">
    <div class="sign-in-wrapper">
        <div class="sign-in-inner">
            <div class="login-brand text-center">
                <i class="fa fa-database m-right-xs"></i> 用户 <strong class="text-skin">注册中心</strong>
            </div>

            <form>
                <div class="form-group m-bottom-md">
                    <input type="text" id="username" class="form-control" placeholder="账号">
                </div>
                <div class="form-group">
                    <input type="password" id="password" class="form-control" placeholder="密码">
                </div>
                <div class="form-group">
                    <input type="password" id="password2" class="form-control" placeholder="确认密码">
                </div>
                <div class="form-group">
                    <div class="custom-checkbox">
                        <input type="checkbox" id="chkAccept">
                        <label for="chkAccept"></label>
                    </div>
                    我同意全部条款
                </div>

                <div class="m-top-md p-top-sm">
                    <div class="btn btn-success block" id="register">创建账号</div>
                </div>

                <div class="m-top-md p-top-sm">
                    <div class="font-12 text-center m-bottom-xs">已有账号?</div>
                    <a href="${pageContext.request.contextPath}/login" class="btn btn-default block">登陆</a>
                </div>
            </form>
        </div><!-- ./sign-in-inner -->
    </div><!-- ./sign-in-wrapper -->
</div><!-- /wrapper -->

<a href="" id="scroll-to-top" class="hidden-print"><i class="icon-chevron-up"></i></a>

<!-- Jquery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.1.min.js"></script>

<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<!-- Slimscroll -->
<script src='${pageContext.request.contextPath}/static/js/jquery.slimscroll.min.js'></script>

<!-- Popup Overlay -->
<script src='${pageContext.request.contextPath}/static/js/jquery.popupoverlay.min.js'></script>

<!-- Modernizr -->
<script src='${pageContext.request.contextPath}/static/js/modernizr.min.js'></script>

<!-- Simplify -->
<script src="${pageContext.request.contextPath}/static/js/simplify/simplify.js"></script>

<script type="application/javascript">
    $(function () {
        $('#register').click(function () {
            let username = $('#username').val();
            let password = $('#password').val();
            let password2 = $('#password2').val();
            let chkAccept = $('#chkAccept').val();
            if(username === "" || password === ""){
                alert("用户名或密码不能为空！");
                return false;
            }
            if(password !== password2){
                alert("两次密码不一致！");
                return false;
            }
            if(password.length < 6){
                alert("密码最小长度为六位！");
                return false;
            }
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/register",
                data:{username,password},
                success:function (data) {
                    if(data === "exit"){
                        alert("用户名已存在，请修改！");
                        return false;
                    }else if(data === "fail"){
                        alert("服务器异常，请重试！");
                        return false;
                    }
                    // 成功之后，页面跳转
                    window.location = "${pageContext.request.contextPath}/login";
                },
                error:function (err) {
                    console.log(err);
                    alert("服务器异常，请稍后再试！")
                }
            })


        })
    })
</script>
</body>
</html>