仿牛客论坛项目之显示登录信息

前言：用户登录成功后会将信息存到浏览器中（具体时间由我们来设置），当用户再次登录时，需要从浏览器中获取信息到服务器中，然后将服务器中的内容显示到浏览器中，具体模板如下。

拦截器示例（拦截浏览器传过来的请求）
● 定义拦截器，实现HandlerInterceptor
● 配置拦截器，为它指定拦截、排除的路径
拦截器应用
● 在请求开始时查询用户登录
● 在本次请求中持有用户数据
● 在模板视图上显示用户数据
● 在请求结束时清理用户数据

1 创建util类 HostHolder

此处选择将 user 类通过线程安全类 ThreadLocal 进行封装，代替 session 封装，主要目的是减小服务器的压力，并且保证线程安全。

import com.zcq.community.entity.User;
import org.springframework.stereotype.Component;

/**
 * 持有用户的信息，代替session对象
 */
@Component
public class HostHolder {

    // 线程安全
    private ThreadLocal<User> users = new ThreadLocal<>();

    public void setUser(User user) {
        users.set(user);
    }

    public User getUser() {
        return users.get();
    }

    public void clear() {
        users.remove();
    }

}

2 编写拦截器，处理请求

import com.zcq.community.entity.LoginTicket;
import com.zcq.community.entity.User;
import com.zcq.community.service.UserService;
import com.zcq.community.util.CookieUtil;
import com.zcq.community.util.HostHolder;
import org.springframework.beans.factory.annotation.Autowired;
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 java.util.Date;

@Component
public class LoginTicketInterceptor implements HandlerInterceptor {

    @Autowired
    private UserService userService;

    @Autowired
    private HostHolder hostHolder;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 从cookie中获取凭证
        String ticket = CookieUtil.getValue(request, "ticket");
        if(ticket != null) {
            // 查询凭证
            LoginTicket loginTicket = userService.findLoginTicket(ticket);
            // 检查凭证是否有效
            // 不为空 且 处于登录状态 且 超时时间晚于当前时间
            if(loginTicket != null && loginTicket.getStatus() == 0 && loginTicket.getExpired().after(new Date())) {
                // 根据凭证查询用户
                User user = userService.findUserById(loginTicket.getUserId());
                System.out.println(user.getId());
                System.out.println(user.getHeaderUrl());
                // 在本次请求中持有用户
                hostHolder.setUser(user);
            }
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        User user = hostHolder.getUser();
        if(user != null && modelAndView != null) {
            modelAndView.addObject("loginUser", user);
        }
    }

    // 在整个请求结束之后将user对象清掉
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        hostHolder.clear();
    }

}

3 编写前端代码，进行显示

注意：此处需要做业务逻辑处理，比如：只有用户登录了才会在头部显示消息和用户头像等信息，用户没登录则显示注册、登录字样。

<div>
	<ul>
		<li>
			<a th:href="@{/index}">首页</a>
		</li>
		<li th:if="${loginUser!=null}">
			<a href="site/letter.html">消息<span>12</span></a>
		</li>
		<li th:if="${loginUser==null}">
			<a th:href="@{/register}">注册</a>
		</li>
		<li th:if="${loginUser==null}">
			<a th:href="@{/login}">登录</a>
		</li>
		<li th:if="${loginUser!=null}">
			<a href="#" id="navbarDropdown" role="button">
				<img th:src="${loginUser.headerUrl}"/> <!-- 头像显示 -->
			</a>
			<div>
				<a>个人主页</a>
				<a th:href="@{/user/setting}">账号设置</a>
				<a th:href="@{/logout}">退出登录</a>
				<div></div>
				<span th:utext="${loginUser.username}">nowcoder</span>
			</div>
		</li>
	</ul>
</div>

4 bug反思

这次编写代码的过程中遇到了一个bug，就是没有获取到用户的头像，看了网上的代码说可以将th:src="${loginUser.headerUrl}"中的 $ 改为 # ，改完之后代码确实不会报错了，但还是获取不到用户的头像信息，最近经过排查确认，在th:if="${loginUser!=null}"中的不等于我写成等于了，导致逻辑出错，无法获取到用户头像和用户名，改完后可以获取到用户的用户名，但头像还是无法获取到，最终调用头像路径的静态资源发现可以获取到。最终刷新页面获取到了，不愧是很神奇的bug。