目录
1、后台登录功能
1.1、接口分析
1.1.2、登录校验逻辑
1.2、代码
1.2.1、统一的返回结果实体类
1.2.2、controller 方法
1.3、测试
2、后台退出功能
2.1、分析
2.2、代码
3、未登录访问首页跳转到登录页面
3.1、分析
3.2、代码
1、后台登录功能
1.1、接口分析
通过浏览器调试工具 F12 可以发现,在登录页面点击登录后,发送 POST 请求 http://localhost:8080/employee/login ,并将输入的账号和密码信息以 JSON 格式发送给后台
前端校验代码如下:
1.1.2、登录校验逻辑
1、将页面提交的密码password进行md5加密处理
2、根据页面提交的用户名username查询数据库
3、如果没有查询到则返回登录失败结果
4、密码比对,如果不一致则返回登录失败结果
5、查看员工状态,如果为已禁用状态,则返回员工已禁用结果
6、登录成功,将员工id存入Session并返回登录成功结果
1.2、代码
首先导入资料中的 Employee 实体类,然后创建对应的 mapper、service、controller
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
}
public interface EmployeeService extends IService<Employee> {
}
@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
}
1.2.1、统一的返回结果实体类
package com.itheima.reggie.common;import lombok.Data;
import java.util.HashMap;
import java.util.Map;// 通用结果返回集
@Data
public class R<T> {private Integer code; //编码:1成功,0和其它数字为失败private String msg; //错误信息private T data; //数据private Map map = new HashMap(); //动态数据public static <T> R<T> success(T object) {R<T> r = new R<T>();r.data = object;r.code = 1;return r;}public static <T> R<T> error(String msg) {R r = new R();r.msg = msg;r.code = 0;return r;}public R<T> add(String key, Object value) {this.map.put(key, value);return this;}}
1.2.2、controller 方法
package com.itheima.reggie.controller;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.itheima.reggie.common.R;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
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.servlet.http.HttpServletRequest;/*** @Author zhang* @Date 2022/8/30 - 21:46* @Version 1.0*/
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {@Autowiredprivate EmployeeService employeeService;/*** 员工登录* @param employee 含有前端提供的账号密码信息* @param request 用于向浏览器的session域储存用户信息* @return*/@PostMapping("/login")public R<Employee> login(@RequestBody Employee employee,HttpServletRequest request){// 将页面提交的密码password进行md5加密处理String password = employee.getPassword();password = DigestUtils.md5DigestAsHex(password.getBytes());// 根据页面提交的用户名 username 查询数据库LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(Employee::getUsername, employee.getUsername());Employee emp = employeeService.getOne(queryWrapper);// 如果没有查询到则返回登录失败结果if(emp == null){return R.error("用户名或密码错误");}// 密码比对,如果不一致则返回登录失败结果if(!emp.getPassword().equals(password)){return R.error("用户名或密码错误");}// 查看员工状态,如果为已禁用状态,则返回员工已禁用结果if(emp.getStatus() == 0){return R.error("该账号已被禁用");}// 登录成功,将员工id存入Session并返回登录成功结果request.getSession().setAttribute("employee", emp.getId());return R.success(emp);}/*** 退出登录* @param request 用于删除session域中的用户信息* @return*/@PostMapping("/logout")public R<String> logout(HttpServletRequest request){// 清理Session域中保存的当前登录员工的idrequest.getSession().removeAttribute("employee");return R.success("退出成功");}}
1.3、测试
测试前,可以先修改请求超时时间,避免调试时间过长导致报错。
修改 js/request.js 下的 timeout 数值
登录成功后,可以在浏览器的 Local Storage 中看到登录的用户信息
前端方法如下
2、后台退出功能
2.1、分析
点击退出登录按钮后,浏览器发送 http://localhost:8080/employee/logout 请求,方式为 POST
后台只需要在 controller 方法中清理 Session 中的用户 id 并返回结果即可。
2.2、代码
/*** 退出登录* @param request 用于删除session域中的用户信息* @return*/@PostMapping("/logout")public R<String> logout(HttpServletRequest request){// 清理Session域中保存的当前登录员工的idrequest.getSession().removeAttribute("employee");return R.success("退出成功");}
3、未登录访问首页跳转到登录页面
3.1、分析
如果用户没有登录,应该无法访问首页,并跳转到登录页面。
这里可以使用过滤器或拦截器,在过滤器或者拦截器中判断用户是否已经完成登录,如果没有登录则跳转到登录页面。
注意,这里的 /backend/js/request.js 有前端的响应拦截器,只要后端的响应信息符合 if 语句的内容就会跳转到登录页面
3.2、代码
① 首先编写一个过滤器
package com.itheima.reggie.filter;import com.alibaba.fastjson.JSON;
import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @Author zhang* @Date 2022/8/31 - 11:01* @Version 1.0*/
// 检查用户是否完成登录
@WebFilter(filterName = "loginCheckFilter", urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {// 路径匹配器(支持通配符)public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher();@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) servletRequest;HttpServletResponse response = (HttpServletResponse) servletResponse;log.info("拦截到请求:{}", request.getRequestURI());// 获取本次请求的URIString requestURI = request.getRequestURI();// 定义不需要处理的请求路径String[] urls = new String[]{"/employee/login", // 登录请求"/employee/logout", // 登出请求"/backend/**", // 前端资源"/front/**" // 前端资源};// 判断本次请求是否需要放行boolean check = check(urls, requestURI);// 不需要处理,直接放行if(check){log.info("本次请求{}不需要处理", request.getRequestURI());filterChain.doFilter(request, response);return;}// 需要处理,判断登录状态// 已登陆,放行if(request.getSession().getAttribute("employee") != null){log.info("用户已登录,放行,用户id为{}", request.getSession().getAttribute("employee"));filterChain.doFilter(request, response);return;}// 未登录则返回未登录结果,通过输出流方式向客户端页面响应数据log.info("用户未登录");response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));return;}/*** 路径匹配,检查该路径是否需要放行* @param urls 需要放行的路径数组* @param requestURI 要酦醅的路径* @return*/public boolean check(String[] urls, String requestURI){for (String url : urls) {boolean match = PATH_MATCHER.match(url, requestURI);if(match){return true;}}return false;}}
② 在启动类加上 @ServletComponentScan 注解,注册过滤器
@Slf4j // 输出日志
@SpringBootApplication
@ServletComponentScan // Filter可以直接通过@WebFilter注解自动注册
public class ReggieApplication {public static void main(String[] args) {SpringApplication.run(ReggieApplication.class, args);//log.info("项目启动成功!");}
}