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

大家好,我是大澈!

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

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

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

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

结语

建立这个平台的初衷:

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

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

相关推荐
岁岁种桃花儿2 分钟前
Vue组件第六篇:Vue单文件组件
开发语言·前端·javascript·vue.js
yivifu5 分钟前
创建支持交叉链接且鼠标悬停显示注释框的HTML文件
前端·javascript·html
毕业设计70312 小时前
(免费领源码) 基于微信小程序的预制菜商城的设计与实现25172-java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
vue.js·python·mysql·微信小程序·pycharm·微信开发者工具·推荐算法
xifangge202512 小时前
AGENTS.md 怎么写?涵盖 Java、Python、Vue、Go 的 8 套开箱即用模板
java·vue.js·python
雪芽蓝域zzs13 小时前
vue解构平铺VS对象包裹
前端·javascript·vue.js
默_笙16 小时前
🚲 从写信到打电话:WebSocket 双工通信与跨域方案的"通信进化史"
前端·javascript
ikoala17 小时前
DeepSeek 官方仓库惊现 DeepSeek Harness 桌面端!
前端·javascript·后端
liangshanbo121517 小时前
React useEffect 与 useLayoutEffect 面试题整理
前端·javascript·react.js
Bs_MoneyMagnet17 小时前
基于springboot+vue的旅游景区点评系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·旅游