爱来自洛屿❤drluo

登出操作

使用@RequestMapping 注解接收PUT请求，销毁账号session

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Controller
@RequestMapping(value = ["/admin"])
interface LoginController {
    
    @RequestMapping(value = ["/logout"], method = [RequestMethod.PUT])
    fun logout(request: HttpServletRequest, response: HttpServletResponse)
}

@Component
class LoginControllerImpl : LoginController {
    override fun logout(request: HttpServletRequest, response: HttpServletResponse) {
        val session = request.session
        try {
            // 销毁session
            request.getSession().invalidate();
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }
}

利用javascript响应按钮事件，通过向 url/logout发送PUT请求，进行账号注销

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const fetchPutRequest = async (url, errorFn) =>
    await fetch(url, {method: "PUT"})
        .then( () => window.location.href="/login")
        .catch(error => errorFn(error));


const logout = () =>  {
    hidePopup()	// 此处为弹出框相关函数
    
    fetchPutRequest('/logout',
        (error) => {
            // 处理错误
            console.error('Logout failed:', error);
        }
    )
}

html/css按钮建立

1
<a class="logout-button" onclick="logout()" >Logout</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.logout-button {
    padding: 6px 0 6px 0;
    background-color: #4CAF50;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    color: #ffffffc7 !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
}

.logout-button::after {
    content: '→';
    margin-left: 10px;
    font-size: 18px;
    transition: margin-left 0.3s ease, transform 0.3s ease;
}

.logout-button:hover {
    background-color: #45a049;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}

.logout-button:hover::after {
    margin-left: 40px;
}