手把手教你实现一个简单的基于token的自动登录(axios+node)

手把手教你实现一个简单的基于token的自动登录(axios+node)

前言

自动登录是现在大多数app的基本需求,可以让用户跳过繁琐的登录过程,提升用户体验,但是对于初学者而言,自动登录不是特别好理解,接下来我们就讲讲如何实现自动登录

基本概念

先来理清如何自动登录的逻辑。

  1. 用户第一次登录时,后端接收到用户账号和密码,经过复杂的加密(md5)后,设置一些参数后(过期时间等)返回一串token字符串
  2. 前端接收到字符串后,将字符串保存到本地(localstorage)
  3. 在发送的每个请求的header头中的Authorization字段中添加保存的token
  4. 后端接收请求后进行验证(token是否正确或过期),若过期,返回401
  5. 完成自动登录功能

简而言之,在用户完成第一次登录之后,我们默认用户就是登录状态!当用户发送一次请求后,通过后端进行验证判断token,若token有效,则正常返回请求,否则认为用户处于不在线状态,返回401。

ps: 因为这只是个基础的自动登录,它没有状态管理,如我设置的7天过期,若我想中途让它失效是不行的,只能等待时间到期。若要改变状态,就需要在服务器建立一个保存是否已签发token的清单,这里不做深入。

token

什么是token,翻译过来就是令牌。在我们的自动登录中,token就代表了用户登录的状态,也就是如果令牌有效,则正常通过请求,否则,不能通过。

我们一般把token放在http的Authorization字段中,这个字段是http规定的存储用户身份的凭证的消息头。

详细参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Authorization

接下来我们就来实现一个自动登录。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值