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

大家好,我是大澈!

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

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

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

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

结语

建立这个平台的初衷:

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

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

相关推荐
ruanno_top1 小时前
表单重置后,验证码还显示已通过:Vue 受控组件的 3 种假同步
vue.js
code_Bo2 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen2 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye2 小时前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN2 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
量化分析码农3 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
ruanno_top5 小时前
给标签页加 roving tabindex,整组反而键盘进不去了
vue.js
天才熊猫君5 小时前
给 Vue 的 reactive 套 Proxy,为什么响应式会失灵?
前端·javascript
仨孩子的爹6 小时前
CSS打印样式:字体族与行高在纸上的对照实测
vue.js
用户2763965765108 小时前
放弃 JWT 后,我给 FastAPI 游戏服务端手撸了一套 token session
javascript