基于 Spring Boot 博客系统开发（五）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（四）👈👈

登录实现

本文使用拦截器（Interceptor）来实现登录功能。拦截器是Spring MVC提供的一种机制，它允许你在请求处理之前或之后执行一些逻辑，比如检查用户是否已登录。

1、创建拦截器类

首先，创建一个实现了HandlerInterceptor接口的类。在这个类中，你可以重写preHandle方法来执行登录检查。LoginInterceptor.java

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

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

@Component
public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        Object loginUser = session.getAttribute("loginUser");
        if(loginUser == null){
            response.sendRedirect("/login");
            return false;
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

2、注册拦截器

接下来，你需要在Spring MVC的配置中注册这个拦截器。如果你使用的是Java配置，可以通过实现WebMvcConfigurer接口来完成。LoginInterceptor.java

import cn.qvtu.web.interceptor.LoginInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class LoginConfig implements WebMvcConfigurer {

    @Autowired
    private LoginInterceptor loginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        InterceptorRegistration registration = registry.addInterceptor(loginInterceptor);
        registration.addPathPatterns("/admin/**"); // 拦截/admin下的所有路径
        registration.excludePathPatterns(// 排除特定路径
                "/login"
        );
    }

}

3、创建登录控制器

这里需要一个密码加密的依赖 Spring Security Core

 		<dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>5.7.6</version>
        </dependency>

登录控制器代码：LoginController.java

import cn.qvtu.web.domain.User;
import cn.qvtu.web.service.IUserService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Controller
@Slf4j
public class LoginController {

    @Autowired
    private IUserService userService;

    @GetMapping("/login")
    public String login(){
        return "client/login";
    }

    @PostMapping("/login")
    public String formLogin(String username, String password, HttpServletRequest request) {
        if(StringUtils.isBlank(username) || StringUtils.isBlank(password)){
            return "redirect:/login?error";
        }
        QueryWrapper<User> query = new QueryWrapper<>();
        query.eq("username",username);
        User user = userService.getOne(query);
        BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
        String encode = encoder.encode(password);
        if(!encoder.matches(password,user.getPassword())){
            return "redirect:/login?error";
        }
        request.getSession().setAttribute("loginUser",user);
        log.info("登录成功:"+username);
        return "redirect:/";
    }

    @RequestMapping ("/logout")
    public String logout(HttpServletRequest request) {
        HttpSession session = request.getSession();
        session.invalidate();
        log.info("注销成功:");
        return "redirect:/";
    }
    
}

登录前端代码： login.html
当账号或密码错误提示，${param.error} 从URL中获取参数。

<div class="am-u-lg-3 am-u-md-6 am-u-sm-8 am-u-sm-centered log-content">
            <h1 class="log-title am-animation-slide-top" style="color: black;">~欢迎登录博客~</h1>
            <br>
            <div style="color: red" th:if="${param.error}">账号或密码错误！</div>
            <form class="am-form" id="loginForm" action="/login" method="post">
                <div class="am-input-group am-radius am-animation-slide-left">
                    <input type="text" class="am-radius" placeholder="用户名" name="username" />
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-user am-icon-sm am-icon-fw"></i>
                    </span>
                </div>
                <br>
                <div class="am-input-group am-animation-slide-left log-animation-delay">
                    <input type="password" class="am-form-field am-radius log-input" placeholder="密码" name="password" />
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-lock am-icon-sm am-icon-fw"></i>
                    </span>
                </div>
                <div style="padding-top: 10px;">
                    <input type="submit" value="登录"
                           class="am-btn am-btn-primary am-btn-block am-btn-lg am-radius am-animation-slide-bottom log-animation-delay" />
                </div>
            </form>
        </div>

账号或密码错误提示效果：
在这里插入图片描述

测试登录账号：admin
测试登录密码：123456

4、后台首页控制器

登录成功可以访问后台首页，控制器AdminController.java。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/admin")
public class AdminController {

    @RequestMapping("/")
    public String home(){
        return "admin/index";
    }

}

5、前台首页 header

修改 header 登录、退出、后台管理的访问 URL，这里需要工具类 LoginUtils 处理登录和退出是否显示。

LoginUtils.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import javax.servlet.http.HttpServletRequest;

@Component
public class LoginUtils {

    @Autowired
    public HttpServletRequest request;

    public boolean isLogin(){
        Object loginUser = request.getSession().getAttribute("loginUser");
        System.out.println(loginUser);
        return loginUser!=null;
    }
    
}

include.html

<div th:fragment="header" >
    <!--[if lt IE 8]>
    <div class="browsehappy" role="dialog">
        当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
    </div>
    <![endif]-->
    <header id="header" class="header bg-white">
        <div class="navbar-container">
            <a href="/static" class="navbar-logo">CrazyStone个人博客小站</a>
            <div class="navbar-menu">
                <a class="header-info" th:if="${@loginUtils.isLogin()}" href="/logout" >退出</a>
                <a class="header-info" th:if="${!@loginUtils.isLogin()}" href="/login" >登录</a>
                <a  class="header-info" href="/admin/">后台管理</a>
            </div>
            <div class="navbar-search" onclick="">
                <span class="icon-search"></span>
                <form role="search" onsubmit="return false;">
                <span class="search-box">
                    <input type="text" id="search-inp" class="input" placeholder="搜索..." maxlength="30"
                           autocomplete="off"/>
                </span>
                </form>
            </div>
        </div>
    </header>
</div>