目录

一. 需求分析

二. 功能实现

三. 功能测试

四. 登录功能完善

4.1 问题分析

4.2 实现步骤

4.3 代码实现

上一篇：

瑞吉外卖项目：后端登录功能实现https://blog.csdn.net/qq_41857955/article/details/124334559

一. 需求分析

员工登录之后，页面跳转到后台首页（backend/index.html）此前会显示用户登录的用户名，点击退出按钮退出系统。

请求API：

说明	值
请求地址URL	employee/loginout
请求参数	无
返回参数	({   "code": 1,   "msg": null,   "data": "退出成功",   "map": {} }

二. 功能实现

只需要清除session即可，在controller中添加如下代码：

    @PostMapping("/logout")
    public R loginOut(HttpServletRequest request){
        // 去除session
        request.getSession().removeAttribute("employee");
        return R.success("退出成功");
    }

三. 功能测试

登录成功后是有session记录的：

点击页码按钮退出后session清除，并返回登录页面就表示成功了。

四. 登录功能完善

4.1 问题分析

前面已经完成了登录功能的开发，但会发现一个问题，就是员工不登录情况下，依然能够进入到目标页面很显然这并不是我们想看到的。

那如何实现呢?使用过滤器或者拦截器，在过滤器或者拦截器中判断用户是否是登录状态，没有登录则跳转到登录页面。

4.2 实现步骤

1. 创建自定义过滤器LoginCheckFilter.java
2. 启动类上加入@ServletComponentScan（这个不要忘记了）
3. 完善过滤器处理逻辑

过滤器处理逻辑主要如下：

1. 获取本次处理请求的URL
2. 判断本次请求是否需要处理
3. 若不需要，直接放行
4. 判断登陆状态，若已经登陆直接放行
5. 若未登陆则返回未登陆结果

流程图如下：

4.3 代码实现

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;


@WebFilter(filterName = "loginCheckFilter", urlPatterns = "
    public boolean check(String[] urls, String requestURI) {
        for(String url : urls){
            boolean match = ANT_PATH_MATCHER.match(url,requestURI);
            if(match){
                return true;
            }
        }
        return false;
    }
}

前端代码（request.js）会通过一个值("NOTLOGIN")来进行拦截器响应匹配后进行页面的跳转：

// 响应拦截器
  service.interceptors.response.use(res => {
      if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登录页面
        console.log('---/backend/page/login/login.html---')
        localStorage.removeItem('userInfo')
        window.top.location.href = '/backend/page/login/login.html'
      } else {
        return res.data
      }
    }