瑞吉外卖 —— 2、后台登录和登出

目录

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 {
}

public interface EmployeeService extends IService {
}

@Service
public class EmployeeServiceImpl extends ServiceImpl 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 {

    private Integer code; //编码：1成功，0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    public static  R success(T object) {
        R r = new R();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static  R error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R 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 {

    @Autowired
    private EmployeeService employeeService;

    /**
     * 员工登录
     * @param employee  含有前端提供的账号密码信息
     * @param request   用于向浏览器的session域储存用户信息
     * @return
     */
    @PostMapping("/login")
    public R login(
            @RequestBody Employee employee,
            HttpServletRequest request
    ){
        // 将页面提交的密码password进行md5加密处理
        String password = employee.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());

        // 根据页面提交的用户名 username 查询数据库
        LambdaQueryWrapper 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 logout(HttpServletRequest request){
        // 清理Session域中保存的当前登录员工的id
        request.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 logout(HttpServletRequest request){
        // 清理Session域中保存的当前登录员工的id
        request.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();

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        log.info("拦截到请求：{}", request.getRequestURI());
        // 获取本次请求的URI
        String 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("项目启动成功!");
    }
}