前端登录页面token过期时间怎么设置
时间: 2023-11-02 13:46:47 浏览: 37
前端登录页面的 Token 过期时间需要在后端进行配置,前端不能直接设置。一般情况下,Token 的过期时间是在后端代码中设置的,可以通过配置文件或者数据库进行配置。在前端登录时,后端会返回一个 Token 并告诉前端 Token 的过期时间,前端需要在本地保存该 Token,并在每个请求中将 Token 发送到后端进行验证。如果 Token 过期了,则需要重新登录获取新的 Token。
相关问题
用bootstrap4和jq写一个,登录页面,不需要调接口,前端验证,token设置过期时间12小时
好的,下面是一个简单的登录页面的示例代码,使用Bootstrap 4和jQuery实现。其中包含前端表单验证和token设置过期时间为12小时。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="mb-4">登录</h1>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
<div class="mt-3" id="errorMsg"></div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(function() {
// 表单提交事件
$('#loginForm').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
var username = $('#username').val();
var password = $('#password').val();
// 前端验证
if (!username || !password) {
$('#errorMsg').html('<div class="alert alert-danger" role="alert">请输入用户名和密码!</div>');
return false;
}
// 模拟接口返回的token
var token = 'fake_token';
// 设置token过期时间为12小时
var expireTime = new Date();
expireTime.setTime(expireTime.getTime() + 12 * 60 * 60 * 1000);
// 存储token到localStorage
localStorage.setItem('token', token);
localStorage.setItem('expireTime', expireTime.getTime());
// 跳转到首页
window.location.href = 'index.html';
});
});
</script>
</body>
</html>
```
说明:
1. 在`<head>`标签中引入Bootstrap和jQuery的CDN链接。
2. 构建一个简单的登录表单,包含用户名和密码两个输入框和一个登录按钮。
3. 在表单提交事件中,获取表单数据并进行前端验证。
4. 模拟接口返回的token并设置过期时间为12小时。
5. 使用localStorage存储token和过期时间。
6. 跳转到首页。
注意:这只是一个简单的示例,实际项目中需要根据具体需求进行修改和完善。例如,需要对密码进行加密处理、需要对token进行有效性验证等等。
前端使用token实现单点登录
前端使用 token 实现单点登录的基本思路是,当用户登录成功后,后端会生成一个 token 并返回给前端。前端将这个 token 存储在客户端,比如通过 Cookie 或者 LocalStorage。
然后,当用户访问其他需要进行身份验证的页面时,前端会将存储的 token 发送给后端进行验证。后端会校验 token 的合法性,如果验证通过,则表示用户已经登录过,可以继续访问。
以下是一个简单的示例代码,使用 JWT(JSON Web Token)来实现 token 的生成和验证:
```javascript
// 登录成功后,后端生成 token 并返回给前端
const token = jwt.sign({ userId: '123' }, 'secretKey');
// 将 token 存储在客户端
localStorage.setItem('token', token);
// 用户访问其他需要验证的页面时,将 token 发送给后端进行验证
const storedToken = localStorage.getItem('token');
// 发送 token 到后端进行验证
fetch('/api/verify', {
headers: {
Authorization: `Bearer ${storedToken}`
}
})
.then(response => {
if (response.ok) {
// 验证通过,继续访问
} else {
// 验证失败,跳转到登录页
window.location.href = '/login';
}
});
```
在后端,你需要验证传递过来的 token 的合法性,并且解析出其中的数据。如果验证成功,则表示用户已经登录过,可以继续处理请求;如果验证失败,则需要返回错误信息或者跳转到登录页。
需要注意的是,为了保证安全性,token 的生成和验证过程需要进行一定的加密和防篡改措施,比如使用 HTTPS 协议传输、设置合适的过期时间等。此外,为了防止 token 被盗用,还可以考虑使用刷新 token 的机制。