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

大家好,我是大澈!

本文约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地址)以及登录时间等信息到数据库中的一个登录表。

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

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

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

结语

建立这个平台的初衷:

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

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

相关推荐
Ivanqhz1 分钟前
NFM(神经因子分解机)
开发语言·javascript·人工智能·算法·蓝桥杯
H Journey1 小时前
web开发学习:html、css、js
前端·css·html·js
用户059540174461 小时前
AI Agent 记忆存储踩坑实录:这个问题让我排查了 3 天,最终用 pytest + Docker 实现秒级回归
前端·css
用户298698530141 小时前
在 React 中拆分 Excel 文件:从工作表到行列的实践
javascript·react.js·excel
今日无bug1 小时前
Emmet 语法速成指南
前端·css·html
Hello.Reader2 小时前
Tailwind CSS v4.3 从入门到实战Vite 安装、响应式布局、暗黑模式与主题配置
前端·css
想要成为糕糕手2 小时前
238. 除了自身以外数组的乘积 — 面试向深度解析
javascript·算法·面试
kisshyshy2 小时前
前端存储、表单异步提交与 this 指向完全指南
前端·javascript·html
Kel2 小时前
管道、IPC、Socket:你以为的三种技术,其实是同一件事
javascript·设计模式·node.js
心中有国也有家2 小时前
AtomGit Flutter 鸿蒙客户端: AnimatedScale 与 AnimatedContainer 联合实战
android·javascript·flutter·华为·harmonyos