龙空技术网

前端框架全是通过API获得数据,如何记录用户登录状态

前端小学生 4581

前言:

此时各位老铁们对“js 获取 cookie”可能比较珍视,你们都需要学习一些“js 获取 cookie”的相关资讯。那么小编同时在网摘上收集了一些有关“js 获取 cookie””的相关资讯,希望姐妹们能喜欢,朋友们一起来学习一下吧!

正好之前想自己搞个项目写着玩的时候,遇到过这个问题。

一开始,我也就是想用 session 来解决,但是后来想到为什么不用 jwt 呢?其实两种方式都能做到,但是用 session 的话,就会有分布式的问题,多台服务器怎么共享一个 session 池,常用的可能是 Redis,不是做后端的也就不献丑了,我主要来讲讲我当时思考出的使用 jwt 的大致流程。

JWT 工作原理

jwt 的本质其实是使用一点 cpu 的计算时间来代替储存空间,这点计算时间相对来说是比较廉价的。它是客户端向服务器请求一个 token,服务器验证了客户端是可信的之后,颁发一个唯一的 token 给客户端,之后客户端就可以使用这个 token 来与服务器通信,这就建立了两端之间的信任。所以你会发现,只要有这个 token,不管是谁都能向服务器发送请求,服务器都会认为是合法的。

知道了 jwt 的工作原理之后,答主的问题就好解决了。

将 Token 保存在 Runtime

想要记录登录状态,就得先登录(废话...)。客户端将账户密码通过 HTTP 请求发送给服务器之后,服务器验证了通过了之后,生成一个 token 返回给前端,前端就可以从 HTTP 的 response 之中拿到这个 token。

拿到 token 之后,我们就可以通过一个全局变量保存下来了,之后的请求都把这个 token 从全局变量中取出来,然后放到请求头之中发送给服务器就好了。

将 Token 保存在 Localstorage

但是随之而来你会发现,当我们重新刷新浏览器之后,本来已经登录了,但是服务器却还是让我们重新登录。这是因为我们把 token 存在了运行时,这说明 token 的生命周期只有应用的启动到销毁的运行状态下才会有,而刷新之后,就被清空了。

解决这个问题的办法就是要让这个 token 持久化,解决方案之一就是存到 localstorage 中。

登录请求成功之后,将 token 存到 localstorage 中,然年每次请求都从 localstorage 中将 token 取出来放到请求头中,这样就完成了 token 持久化,这也是很多应用采用的方式。

但是这样就完美了吗?不尽然吧~

如果我们的网站被攻击了 xss 注入攻击了(当然不希望发生),对方就能获取到 localstorage 中的全部内容了,这里就包括了 token 这个重要信息。这要怎么办呢?

所以我觉得最好的方式是使用 cookie 来保存 token。

使用 Cookie 保存 Token

登录请求成功之后,http 不需要返回 token 的信息,而是服务器直接 setCookie,来将 token 直接写到客户端的 cookie 之中。你可能会说了,写到 cookie 中,xss 注入不是也可以读到吗?no、no、no,我们除了要设置 token 之外,还要再做一个更重要的事,就是设置 cookie 为 http-only,这样,我们就能确保 js 读取不到 cookie 的信息了,再加上 https,就能让我们的请求更安全一些了。

使用 cookie 保存 token 有两个好处:

安全性

我们能够通过 https 和设置 cookie http-only 来保证 cookie 的信息足够安全,不易被窃取。

客户端无感知

客户端只知道登录成功了,随后的一切请求都无需任何处理,因为 cookie 是浏览器自带的,所以我们不需要关心如何处理 token。使用 localstorage 有一个问题,就是每当 token 过期,我们还需要重新起将新的 token 设置到 localstorage 中。而是使用 cookie 的话,客户端就无需做任何处理,服务器判断 token 过期之后,直接更新 cookie 就可以了。

更新 Token

token 有一个特点,就是一旦生成,就不能再被改变,所以你会发现,假设你颁布了一个有效期15分钟的 token,过了15分钟之后,即使用户一直在活跃,也会被立即强迫推出。这个其实不太符合部分应用的需求。

假如我们想要活跃的用户能一直保持登录状态的话,就需要快到15分钟的时候,去重新颁发一个 token 来延长登录有效期。而这时就会对同一个用户同时存在两个有效的 token,所以我们在重新颁发一个 token 的同时,还需要将快要过期的 token 拉黑,使其失效。

如何拉黑 token

有些同学对如何拉黑和更新 token 比较感兴趣,我来简单说一下。

在每一个请求进来的时候,需要做几件事

是否需要验证 token(因为有一些 api 可能并不需要被验证)请求来的 token 是否合法(是否过期、是否被拉黑)解析 token,查看是不是快要过期,如果快要过期(比如距离过期时间差15分钟),重新颁发一个 token 并设置 cookie,并将当前 token 拉黑,请求继续。

那么要如何拉黑 token 呢?

简单说就是使用数据库将要被拉黑的 token 存起来,然后每次在上面流程中验证 token 的时候,去查一下数据库看看 token 是不是被拉黑了。

但是你会发现被拉黑的 token 会在数据库里越来越多,所以我们还可以开一个定时任务去将数据库里已经过期的 token 删掉,因为他们已经过期了,不存在被不被拉黑的问题。

作者:阿健大叔

链接:

标签: #js 获取 cookie