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

大家好,我是大澈!

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

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

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

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

结语

建立这个平台的初衷:

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

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

相关推荐
我认不到你18 分钟前
antd proFromSelect 懒加载+模糊查询
前端·javascript·react.js·typescript
scc214028 分钟前
spark的学习-06
javascript·学习·spark
我是苏苏1 小时前
C# Main函数中调用异步方法
前端·javascript·c#
转角羊儿1 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
前端Hardy2 小时前
探索 HTML 和 CSS 实现的 3D 开关按钮
css·3d·html
Bio Coder2 小时前
学习用 Javascript、HTML、CSS 以及 Node.js 开发一个 uTools 插件,学习计划及其周期
javascript·学习·html·开发·utools
糊涂涂是个小盆友2 小时前
前端 - 使用uniapp+vue搭建前端项目(app端)
前端·vue.js·uni-app
凹凸曼打不赢小怪兽3 小时前
react 受控组件和非受控组件
前端·javascript·react.js
忠实米线4 小时前
使用pdf-lib.js实现pdf添加自定义水印功能
前端·javascript·pdf
pink大呲花4 小时前
关于番外篇-CSS3新增特性
前端·css·css3