到访游客请注意，如果你有相似的问题，请不要跟着步骤，这里记录的是踩坑和解决

解决在最后：debug不如rebuild：）

开始踩坑

坑1：首先是数据库设计

很自然的想到用户登录是一个表。
用户需要权限角色，可能一对多，所以出现了角色表。
这些接口有哪些角色可以使用。

出现第一个大坑。
security的接口权限设计是这样的：在服务器第一次启动的时候会为这些接口设置权限角色
也就是
权限角色
.hasAnyAuthority
还一个用来给用户分配的角色
用户角色
.hasAnyRole()

实际上security的架构需要四层数据表
如果只有三层，一般只能选择将权限角色和用户角色合并
但security的架构原因会锁死，接口开放给哪些权限角色
会让服务只能管理用户拥有哪些角色
不能管理角色拥有哪些权限接口

坑2：security的函数式编程设置是有顺序的

这个坑十分的魔幻
经过多次尝试得出标题结论
不按照顺序进行设置总是不能达到逻辑上希望实现的效果

详细的路径放前面，通配的路径放后面

/root/abc----->>>>/root/**
/root/**----- >>>>/**
前面的路径权限会覆盖后面的路径权限，逻辑通顺
其他的都会出现不可名状的错误。

因为坑1导致的坑3

因为坑一写死了权限角色，权限角色和用户角色合并
这导致了维护灾难
当新的接口出现的时候！！！
这个接口属于哪个角色？
这个权限给这个角色是否合理？
是否需要新增一个角色？
新增角色分配用户该怎么分配？

这些问题竟然需要提前想好!!!
而不是用到再去新增

坑4：后端跨域问题

因为是前后端分离的项目，前端9090访问后端8080。

前端直接喜提cors报错

然后学习security该怎么处理跨域加个.cors();

还有拓展知识等着你来。

1.既然前后端分离那怎么保证session

security使用往前端的cookie里塞sessionID
请求的时候再用sessionid来获得服务器上准备的session

2.既然是session那关闭浏览器再开启会失效，是怎么实现的。

3.二的问题该怎么用token来解决

这个还没学

坑4.5登录问题

security默认是8080/login返回一个默认的login.html
前端直接请求会返回一串html而不是想要的验证cookie的SessionId
所以需要配置security来自定义登录界面。
好在只用处理登录逻辑就行了。
我们可以用自带的/login来作为接口
虽然不知道为什么但是登出的逻辑好像要写在登入前面。

坑5前端跨域问题

经过大佬博客指点，终于解决了坑1,2,3,4等。
完成了后端的配置，但是前端还得自己完成。
9090访问8080是没问题了！
现在问题是8080给9090的参数，9090不认。

坑5.1编译器是否有问题

因为是用idea来debug的项目63342，所以我怀疑是开服不规范的问题，而且我找不到idea的debug服务器的配置在哪配置。
然后我掏出了我的node.js来经过一番折腾终于把跨域问题解决了。

坑6：天坑：知识盲区：AJAX的post不能setcookie

经过前面的5坑，明明相应头里面包含一个http-only的cookie但为什么浏览器不会自动帮忙写入。
开始我以为是服务器的问题实际不是，所以省略服务器踩坑。
实际是AJAX就不是干这个的

ajax只有向服务器发送请求时带上cookie的功能可选。
不存在ajax向服务器get的时候带回来cookie的功能。

坑6：解决

把ajax代码改成原本的js代码来完成需求：
悲剧的ajax

$(document).ready(function() {
        $('.form-signin').submit(function(event) {
            event.preventDefault(); // 阻止表单默认的提交行为

            var form = $(this);
            var url = form.attr('action');
            var formData = form.serialize();

            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/login',
                data: formData,
                success: function(response, status, xhr) {

                    console.log(response)
                    console.log(status)
                    console.log(xhr)


                    var setCookieHeader = xhr.getResponseHeader('Set-Cookie');
                    if (setCookieHeader) {
                        var cookies = setCookieHeader.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            document.cookie = cookies[i];
                        }
                    }
                    // 跳转到主页
                    // $(location).attr('href', 'http://localhost:63342/attendance/managView/index.html');
                },
                error: function(xhr, status, error) {
                    // 处理请求错误的情况
                }
            });

        });
    });

正确的js

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.form-signin').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认的提交行为

    var form = this;
    var url = form.getAttribute('action');
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:8080/login', true);
    xhr.withCredentials = true; // 允许发送跨域Cookie

    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
        console.log(xhr.status);

        var setCookieHeader = xhr.getResponseHeader('Set-Cookie');
        if (setCookieHeader) {
          var cookies = setCookieHeader.split(';');
          for (var i = 0; i < cookies.length; i++) {
            document.cookie = cookies[i];
          }
        }
        // 跳转到主页
        // window.location.href = 'http://localhost:63342/attendance/managView/index.html';
      } else {
        // 处理请求错误的情况
      }
    };

    xhr.onerror = function() {
      // 处理请求错误的情况
    };

    xhr.send(formData);
  });
});