瑞吉外卖 - 后台系统退出功能（4）

某马瑞吉外卖单体架构项目完整开发文档，基于 Spring Boot 2.7.11 + JDK 11。预计 5 月 20 日前更新完成，有需要的胖友记得一键三连，关注主页 “瑞吉外卖” 专栏获取最新文章。
相关资料：https://pan.baidu.com/s/1rO1Vytcp67mcw-PDe_7uIg?pwd=x548
提取码：x548

1.需求分析

员工登陆后，页面会跳转到系统首页面（backend/index.html），此时会显示当前用户的用户名信息。

这个信息其实就是上一文中提到的服务端传回前端，然后使用 localStorage.setItem('userInfo', JSON.stringify(res.data)) 存储在浏览器中的用户数据。当我们点击右侧的退出按钮即可退出系统，退出系统页面后应该跳回登陆页面。

那么，点击退出按钮后会访问什么地址呢？我们同样使用调试台一测便知：

可以看到，当我们点击退出登陆按钮后会以 POST 方式请求 ”/employee/logout“，这便是我们接下来要实现的功能。

具体处理逻辑如下：

1. 清理 Session 域中存储的用户 id；
2. 返回结果。

2.代码开发

EmployeeController 中用于处理退出登陆的代码如下：

/*** 处理退出请求* 说明：退出操作需要将 Session 中的员工 id 移除，因此需要一个 HttpServletRequest 参数** @param request 请求对象* @return 响应对象*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request) {// 1.从 Session 中移除员工 idrequest.getSession().removeAttribute("employee");// 2.返回退出成功结果return R.success("退出成功");
}

至此，我们的登陆退出功能就实现了，最终完整的 EmployeeController 代码如下：

package cn.javgo.reggie_take_out.controller;import cn.javgo.reggie_take_out.common.R;
import cn.javgo.reggie_take_out.entity.Employee;
import cn.javgo.reggie_take_out.service.EmployeeService;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;/*** @author: JavGo* @description: TODO* @date: 2023/5/13 16:14*/
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {@Resourceprivate EmployeeService employeeService;/*** 处理登陆请求* 说明：* 1.由于前端携带的用户名和密码是以 JSON 形式提交的，所以需要使用 @RequestBody 注解将请求体中的 JSON 数据转换为 Employee 对象* 2.由于前端传过来的是明文密码，所以需要对密码进行 MD5 加密处理* 3.需要使用 HttpServletRequest 对象获取 session 对象，用于将登陆成功的用户信息存入 session 中，以便后续的请求可以直接获取到用户信息** @param request  请求对象* @param employee 员工对象* @return 响应对象*/@PostMapping("/login")public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {// 1.将页面提交的密码进行 MD5 加密处理String password = employee.getPassword();password = DigestUtils.md5DigestAsHex(password.getBytes());// 2.根据用户名查询数据库/*LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(Employee::getUsername,employee.getUsername());Employee emp = employeeService.getOne(queryWrapper);*/QueryWrapper<Employee> queryWrapper = new QueryWrapper<>();queryWrapper.eq("username", employee.getUsername());Employee emp = employeeService.getOne(queryWrapper);// 3.如果没有查询到则返回登录失败结果if (emp == null) {return R.error("登陆失败");}// 4.进行密码比对，如果不一致则返回登录失败结果if (!emp.getPassword().equals(password)) {return R.error("登陆失败");}// 5.查看员工状态，如果为已禁用状态，则返回员工已禁用结果if (emp.getStatus() == 0) {return R.error("账号已禁用");}// 6.登录成功，将员工 id 存入 Session 并返回登录成功结果request.getSession().setAttribute("employee", emp.getId());return R.success(emp);}/*** 处理退出请求* 说明：退出操作需要将 Session 中的员工 id 移除，因此需要一个 HttpServletRequest 参数** @param request 请求对象* @return 响应对象*/@PostMapping("/logout")public R<String> logout(HttpServletRequest request) {// 1.从 Session 中移除员工 idrequest.getSession().removeAttribute("employee");// 2.返回退出成功结果return R.success("退出成功");}
}

3.功能测试

在上面的后端代码中，我们从 Session 域中移除了员工 id，其实在前端的 static/backend/index.html 代码中也进行了浏览器端存储的用户信息的清楚操作。

对应代码如下：

注意：再次强调，由于我们的静态文件都是存储在项目的 resources/static 目录下，所以当出现 404 的时候，就需要留意是否前端代码的路径缺少了 ”static“。当然，为了一劳永逸，我们可以在 IDEA 中按 ctrl + R 快捷键打开替换，然后一次性地在所有 ”/backend“ 前加上 ”/static“。

下面以 ”/backend“ 为例，胖友自行对 “/front”也应该做同样的修改：

启动应用，成功登陆后台，然后 F12 打开调试工具查看存储的用户信息变化：

点击退出按钮，回到登陆页面，用户信息被清理：