同构SPA应用jwt实践

关键字:Isomorphic、SPA、Jwt

Jwt简介

先介绍一下Jwt:Jwt简介

3层过程

  • 浏览器获取页面,前端服务器发现未登录,重定向到登录页面<这个重定向由后端控制>
  • 录入用户、密码,发送给accout后端服务,验证信息,返回jwt给浏览器
  • 登录成功,浏览器重定向到主页面,此时携带token<这个重定向由浏览器控制>

  • 前端服务器接收到主页的请求,再次进行验证,发现已经登录,返回主页面

  • 浏览器做前端渲染,向后台请求数据时,携带token。进行验证。

问题

  • 查资料说,token可以通过cookie来设置,也可以通过localStorage来设置
    token通过Set-Cookie的方式发送给浏览器但一直没有设置成功,设置了domain、path、max-age
    cookie详解
    后来通过浏览器调用document.cookie来进行设置

  • 使用cookie设置的问题
    token时间与cookie时间问题,token与cookie各有自己的过期时间,两个时间不一致会存在问题,不太喜欢2个源的东西。

  • 使用localStorage的问题
    存储在LocalStorag里的问题是,无法在向前端服务器请求页面的时候,自动携带这个token。

  • 后端缓存token的问题
    jwt本身设计就是stateless,如果加上缓存,就是一有状态的东西,与sessionId的使用一致。
    需要用一些规则来包成token的安全

token安全规则

token最佳实践

2层过程

思维过程如下:
用cookie来传输jwt由于2个过期时间,所以弃用
=> 选择localStorage来存储
=> 无法给前端服务器携带
=> 放弃前端服务器重定向
=> 使用浏览器端的重定向

浏览器端的重定向通过判断localStorage中是否存在jwt来判断是否登录,判断时机是整个页面重渲染时,由于是Isomorphic的SPA,这个时机可以认为是在页面第一次从后端取之后,前端第一次渲染时做的判断。