Vue+Session+Interceptor实现会话登录超时重新登录

偏执的太偏执、 2023-02-15 10:26 10阅读 0赞

**原理：session会话存储在服务器上，过期时间为30分钟，在login操作时，给session设置值，在springmvc拦截器中进行登录拦截，判断session是否存在，存在放行，不存在请求报错，返回401，前端捕获异常401，进行页面的重新跳转，重新登录。**

**登陆超时转载：**[https://blog.csdn.net/qq\_27610601/article/details/81353027][https_blog.csdn.net_qq_27610601_article_details_81353027]，里面使用的是redis存储token，设置过期时间

@RestController
    @RequestMapping("/login")
    public  class Login11Controller {
        @Autowired
        private LoginService loginService;
    
        @PostMapping("/checkLogin")
        public Map<String, Object> login(@RequestBody Map<String,String> map, HttpSession session) {
            String account=map.get("account");
            String password=map.get("password");
            Map<String, Object> response = new HashMap<>();
            Hr login = loginService.checkLogin(account);
            if (null == login) {
                response.put("data", 3);
                return response;
            }
            if(!login.getEnabled()){//账号不可
                response.put("data",4);
                return response;
            }
            String pwd = login.getPassword();
            String pwd2Md5 = CommonUtils.parsePwd2Md5(password);
            if (pwd == null) {
                response.put("data", 3);
                return response;
            }
            if (!pwd.equals(pwd2Md5)) {
                response.put("data", 2);
                return response;
            }
            String token = UUID.randomUUID().toString();
            //设置session,当30分钟未操作，将重新登录
            session.setAttribute(account+login.getWorkId(),token);
            //session.setMaxInactiveInterval(30*60); //30分钟
            response.put("data", 1);
            response.put("hr", login);
            response.put("token",token);
            return response;
        }
    
    }

拦截器：参考内容[https://www.jianshu.com/p/51c5193b5883][https_www.jianshu.com_p_51c5193b5883]

/**
     * @Author:xuexia
     * @Date:2020/6/4
     * @Description: 拦截器的本质就是AOP面向切面编程
     */
    @Slf4j
    public class LoginInterceptor implements HandlerInterceptor {
    
        /**
         *预处理回调方法，实现处理器的预处理（如登录检查）。
         *第三个参数为响应的处理器，即controller。
         *返回true，表示继续流程，调用下一个拦截器或者处理器。
         *返回false，表示流程中断，通过response产生响应。
         */
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
            Map<String, String> login = CookieUtils.getCookieValue(request);
            log.info("开始登录了");
            if (login == null|| login.size()<1) {
                log.info("该请求已被拦截......");
                response.setStatus(401);
                return false;
            }
    
            //若token不相等，则前端获取不到后端的请求，页面内容显示为空
            String token = (String) request.getSession().getAttribute(login.get("user")+login.get("workID"));
            if (login.get("token").equals(token)) {
                log.info("登陆成功......");
                return true;
            }
            log.info("该请求已被拦截......2");
            response.setStatus(401);
            return false;
        }
    }

SpringMVCConfig配置：

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
    
        /**
         * 在发送请求前进行拦截
         * 自定义拦截规则
         *
         * @param registry
         */
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
            // addPathPatterns - 用于添加拦截规则
            // excludePathPatterns - 用户排除拦截
            // addInterceptor - 注册器拦截
            registry.addInterceptor(new LoginInterceptor())
                    .addPathPatterns("/**")
                    /*.excludePathPatterns("/emp/*")
                    .excludePathPatterns("/depts/**")
                    .excludePathPatterns("/sys/*")
                    .excludePathPatterns("/recruit/*")
                    .excludePathPatterns("/recruit/*")
                    .excludePathPatterns("/salper/*")*/
                    .excludePathPatterns("/upload/excel")
                    .excludePathPatterns("/login/*");
    
        }
    }

捕获401status：

await this.$http.post(
                  WEB_URL+"/salary/salperput",this.salary)
                  .then(res => {
                    //console.log(res.data)
                    if(res.data.state!=0){
                      this.initSalaries();
                      this.$message.success("工资数据修改成功!");
                      this.dialogVisible = false;
                    }else{
                      this.$message.error("工资数据修改失败!");
                    }
                  }).catch(err=>{
                    if(err.response.status == 401) {
                      this.$router.push("/")
                    }
                  })

[https_blog.csdn.net_qq_27610601_article_details_81353027]: https://blog.csdn.net/qq_27610601/article/details/81353027
[https_www.jianshu.com_p_51c5193b5883]: https://www.jianshu.com/p/51c5193b5883