第十一次课后作业

最新推荐文章于 2024-11-16 00:27:13 发布

胡旭明202205403115

最新推荐文章于 2024-11-16 00:27:13 发布

阅读量456

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/weixin_74529543/article/details/140100453

版权

1.Filter过滤器
Filter表示过滤器，是 JavaWeb三大组件(Servlet、Filter、Listener)之一。

JWT过滤器是一种在服务器端实现的安全机制，用于在处理请求之前验证JWT的有效性。过滤器通常在请求到达控制器之前执行，它们可以检查请求头中的JWT，验证其签名和有效期，并根据验证结果决定是否继续处理请求或拒绝请求。过滤器一般完成一些通用的操作，比如：登录校验、统一编码处理、敏感字符处理等。使用了过滤器之后，要想访问web服务器上的资源，必须先经过滤器，过滤器处理完毕之后，才可以访问对应的资源。

在Spring框架中，可以通过实现Filter接口或使用@ControllerAdvice注解结合@ExceptionHandler方法来创建JWT过滤器。这些过滤器可以配置为拦截特定的URL模式，确保只有持有有效JWT的请求才能访问受保护的资源。

过滤器的基本使用操作：

第1步，定义过滤器：1.定义一个类，实现 Filter 接口，并重写其所有方法。

第2步，配置过滤器：Filter类上加 @WebFilter 注解，配置拦截资源的路径。引导类上加 @ServletComponentScan 开启Servlet组件支持。

2.采用JWT令牌和Filter进行登录拦截认证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="js/element.css">
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<style>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9f9f9; /* 调整为更浅的灰色 */
animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.login-container {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 10px; /* 稍微增加圆角 */
box-shadow: 0 0 20px rgba(0, 150, 255, 0.2); /* 使用蓝色阴影 */
transition: box-shadow 0.3s ease-in-out;
}

.login-container:hover {
box-shadow: 0 0 30px rgba(0, 150, 255, 0.4); /* 加深阴影 */
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #0096ff; /* 使用蓝色标题 */
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #0096ff; /* 使用蓝色标签 */
}

.form-group input {
width: 100%;
padding: 10px;
border-radius: 10px; /* 稍微增加圆角 */
border: 1px solid #0096ff; /* 使用蓝色边框 */
transition: border-color 0.3s ease-in-out;
}

.form-group input:focus {
border-color: #0073b1; /* 当输入字段获得焦点时，边框颜色更深 */
box-shadow: 0 0 5px rgba(0, 150, 255, 0.5); /* 添加聚焦时的阴影 */
}

.login-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #0096ff; /* 使用蓝色背景 */
color: #fff;
border: none;
border-radius: 10px; /* 稍微增加圆角 */
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

.login-btn:hover {
background-color: #0073b1; /* 悬停时颜色更深 */
}

/* 额外样式：添加一个有趣的图标到按钮上 */
.login-btn::before {
content: "🚀"; /* 使用Emoji作为图标 */
margin-right: 10px;
}

/* 可能的背景图像（可选） */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('img/01b83361429fcf11013eaf70c795b1.jpg') no-repeat center center; /* 替换为您的有趣背景图片 */
background-size: cover;
z-index: -1;
opacity:0.1; /* 根据需要调整透明度 */
}
</style>
</head>
<body>
<div class="login-container" id="app">
<h2>登录</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" v-model="user.username" required>
</div>
<div class="form-group">
<label for="password" >密码:</label>
<input type="password" id="password" name="password" v-model="user.password" required>
</div>
<button type="submit" class="login-btn" >登录</button>
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
// 登录表单数据
user: {
"username": "",
"password": ""
}
},
methods: {
login() {
if (!this.user.username || !this.user.password) {
alert('Please fill in both username and password.');
return;
}
// 登录接口URL
var url = 'login';
// 使用axios发送POST请求
axios.post(url, this.user)
.then(res => {
// 假设响应包含一个code和message字段
var baseResult = res.data;

const token=res.data.data;
localStorage.setItem('token',token);

if (baseResult.code == 1) {
// 登录成功
// 可以重定向到主页或执行其他操作
location.href = 'equip_findall.html';
} else {
// 登录失败
alert(baseResult.message);
}
})
.catch(err => {
// 请求失败处理
console.error(err);
alert('登录失败，请检查网络连接或用户名/密码是否正确。');
});
}
}
});
</script>
</html>