基于 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 {@Overridepublic 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;}@Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {}@Overridepublic 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 {@Autowiredprivate LoginInterceptor loginInterceptor;@Overridepublic 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 {@Autowiredprivate 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 {@Autowiredpublic 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>