爱来自洛屿❤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;
}
|
