js实现强制登录
实现强制登录的 JavaScript 方法
在 Web 应用中实现强制登录功能，通常需要结合前端路由拦截、权限验证和后端接口校验。以下是几种常见的方法：
路由拦截
使用前端框架（如 Vue、React）的路由守卫功能，在用户访问受限页面时检查登录状态：
// Vue Router 示例
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuthStatus() // 检查登录状态的方法
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})本地存储检查
通过检查 localStorage 或 sessionStorage 中存储的 token 判断登录状态：
function checkAuthStatus() {
return !!localStorage.getItem('authToken')
}
if (!checkAuthStatus() && !isLoginPage()) {
window.location.href = '/login'
}全局请求拦截
使用 axios 等 HTTP 库设置请求拦截器，当后端返回 401 状态码时跳转登录页：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname)
}
return Promise.reject(error)
}
)定时检查登录状态
设置定时器定期检查登录状态，防止 token 过期后用户仍停留在页面：
setInterval(() => {
if (!checkAuthStatus()) {
alert('会话已过期，请重新登录')
window.location.href = '/login'
}
}, 300000) // 每5分钟检查一次关键页面保护
对敏感操作（如支付页面）添加额外的保护层：
document.addEventListener('DOMContentLoaded', () => {
if (!checkAuthStatus()) {
document.body.innerHTML = '<div class="login-redirect">请先登录</div>'
setTimeout(() => {
window.location.href = '/login'
}, 2000)
}
})注意事项
- 所有前端验证都需配合后端验证，仅前端验证不安全
- 敏感操作应使用 HTTPS 协议确保传输安全
- 考虑实现 token 刷新机制避免频繁跳转登录页
- 登录后应妥善处理重定向逻辑，提升用户体验
