首页/文章/前端

功能问题:如何限制同一账号只能在一处登录

2024-02-21
12875 分钟
...

大家好,我是大澈!

本文约1200+字,整篇阅读大约需要2分钟。

感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 需求分析

前阵子,和问答群里一个前端朋友,随便唠了唠。期间他问了我一个问题,让我印象深刻。

他问的是,限制同一账号只能在一处设备上登录,是如何实现的?并且,他还把这个功能称为“单点登录”。

我说这不叫“单点登录”,这是“单设备登录”。

于是,当时对此概念区分不清的他,和我在语言上开始了深度纠缠。

所以在后面我就想,这个功能问题有必要整理一下,分享给现在还不清楚两者概念的朋友们。

2. 功能实现

先聊聊“单点登录”和“单设备登录”区别,再说说实现“单设备登录”的步骤。

2.1 单点登录和单设备登录的区别

“单点登录”和“单设备登录”是两个完全不同的概念。

单设备登录指:在某个给定的时间,同一用户只能在一台设备上进行登录,如果在其他设备上尝试登录,先前的会话将被中断或注销。

单点登录(简称SSO)指:允许用户使用一组凭据(如用户名和密码)登录到一个系统,然后可以在多个相关系统中,无需重新登录即可访问受保护的资源。

关于“单点登录”的实现,这里简单说一下。一般有两种方式:若后端处理,部署一个认证中心,这是标准做法;若前端处理,可以用LocalStorage做跨域缓存。

2.2 单设备登录的实现

要实现单设备登录,一般来说,有两种方式:使用数据库记录登录状态 和 使用令牌验证机制 。

使用令牌验证机制 的实现步骤如下:

• 用户登录时生成token,将账号作为key,token作为value,并设置过期时间存入redis中。

• 当用户访问应用时,在拦截器中解析token,获取账号,然后用账号去redis中获取相应的value。

• 如果获取到的value的token与当前用户携带的token一致,则允许访问;如果不一致,则提示前端重复登录,让前端清除token,并跳转到登录页面。

• 当用户在另一台设备登录时,其token也会存入redis中,这样就刷新了token的值和redis的过期时间。

使用数据库记录登录状态 的实现步骤如下:

• 在用户登录时,记录用户的账号信息、登录设备的唯一标识符(如设备ID或IP地址)以及登录时间等信息到数据库中的一个登录表。

• 每次用户的登录请求都会查询数据库中的登录表,检查是否存在该用户的登录记录。如果存在记录,则比对登录设备的标识符和当前设备的标识符是否相同。

• 如果当前设备与登录设备不匹配,拒绝登录并提示用户在其他设备上已登录。若匹配,则更新登录时间。

• 当用户主动退出登录或超过一定时间没有操作时,清除该用户的登录记录。

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关知识点。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 为了给功能问题专栏添加乐趣,增设技术资讯、实用干货两个新专栏。

感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
前端2026-07-17
HTML Form 可以把 POST 响应加载进 iframe
在接入支付验证、身份认证或第三方授权页面时,我们经常会遇到这样的流程: 1. 后端返回一个第三方接口地址。 2. 这个地址必须通过 请求访问。 3. 接口返回 HTML,或者重定向到真正的验证页面。 4. 验证页面需要嵌入当前网站,而不是打开新标签页。 5. 验证完成后,当前页面继续执行后续业务。 第一次遇到这个需求,很容易想到: 但涉及第三方支付时,这种方式通常会遇到 CORS、Cookie、重定向和跨域页面读取限制。 实际上,HTM...
学习
前端2026-05-29
前端判断一个网页是否允许被 iframe 内嵌
前端 不能 100% 准确提前判断 一个网页是否允许被 iframe 内嵌,因为决定权主要在目标网站返回的 HTTP 响应头 里,而普通前端 JS 通常读不到跨域页面的响应头。 核心判断看这两个东西: 1. 老一点但仍常见。 表示完全不允许被 iframe 嵌入。 表示只允许同源页面 iframe 嵌入。 以前有这个,但现代浏览器支持很差,基本不建议依赖。 2. 现在更推荐看这个。 表示不允许任何页面嵌入。 表示只允许同源嵌入。 表示只...
学习
前端2026-03-20
网页唤起 Android App 调试笔记(App Links)
  在最近的项目中,我遇到了 网页访问特定 URL 应该唤起 Android App,但实际只打开网页 的问题。通过调试和排查,整理出以下经验和步骤。 1\. 项目与环境信息(脱敏处理) 网站域名: 唤起页面: Android App 包名: intent filter 配置示例: assetlinks.json 已上线,包含 App 的 SHA256 签名指纹 2\. 问题现象 用户访问 页面时, 网页打开了,但 App 没...
学习
前端2026-03-02
深入理解 Cookie:安全属性、访问边界与渲染场景实践
本文系统梳理 Cookie 核心机制,聚焦 HttpOnly/SameSite 等安全属性 、 访问权限边界 、 CSR/SSR 差异 ,附关键代码示例与安全清单。适合开发查阅与知识沉淀。 一、Cookie 是什么?为什么需要它? HTTP 是无状态协议。Cookie 是服务端通过 响应头下发、浏览器自动存储并在后续 同源请求中携带 的小型文本数据(通常 ≤4KB),用于: 会话维持(Session ID) 用户偏好(语言/主题) 跨请...
学习
前端2026-03-02
退出登录时 Cookie 清除指南
核心结论 :登出 ≠ 单方面操作。HttpOnly 与非 HttpOnly Cookie 需 前后端协同清除 ,缺一不可。残留 Cookie = 安全隐患 + 用户体验漏洞。 🔒 为什么不能“一键清空”? 浏览器出于安全设计: 后端 :只能通过 响应头清除 自己设置过 的 Cookie(需属性完全匹配) 前端 JS :可读写非 HttpOnly Cookie,但 无法触碰 HttpOnly Cookie 无“清除全部”API :任何服...
学习
前端2025-12-15
懒加载图片在同一个 Item 中逐个出现的原因与解决方案
懒加载图片在同一个 Item 中逐个出现的原因与解决方案 适用场景 :使用原生 实现图片懒加载的动态列表,每个列表项(item)包含多张图片。 📌 问题描述 在开发一个动态渲染的列表时,每个 item 中包含三张图片,并使用 HTML 原生的懒加载属性: 观察到的现象: 开启懒加载时 :三张图片 不是同时出现 ,而是 从左到右(或从上到下)依次加载显示 ,有明显的时间差。 关闭懒加载(移除 )后 :三张图片 看起来是一起出现的 ,视觉...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录