后端token应该保留在哪里（前端token中4个存储位置的优缺点说明）

一  
  
  
  
  
  
  
  、token是什么

Token: 访问资源的凭证               。

一般用户通过用户名密码登录后  
  
  
  
  
  
  
  ，服务端会将登录凭证做数字签名 
  
  
  
  
  
  
  
，加密之后的字符串作为Token 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

并在客户端后面的向服务端的请求中携带


 


 


 


 


 


 


 

，作为凭证














。

二 
  
  
  
  
  
  
  
、token一般存放在哪里？

token 在客户端一般存放于localStorage


 


 


 


 


 


 


 

、cookie 
 
 
 
 
 
 
 、或sessionStorage 
 
 
 
 
 
 
 ，vuex中
  
  
  
  
  
  
  
 。

1  
   
   
   
   
   
   
   
、localStorage

优点： localStorage 生命周期是永久  
   
   
   
   
   
   
   
，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息

 

 

 

 

 

 

 
，否则这些信息将永远存在 
  
  
  
  
  
  
  。相同浏览器的不同页面间可以共享相同的localStorage (页面属中相可域名和端口) 


 


 


 


 


 


 


 

。 缺点：同一个属性名的数据会被替换
 

 

 

 

 

 

 

 ，不同浏览器无法共享localStorage或sessionStorage中的信息
 
 
 
 
 
 
 
。

2

 

 

 

 

 

 

 
、sessionStorage

优点： sessionStorage生 命周期为当前窗口或标签页               ，sessionStorage的数据不会被其他窗口清除
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，页面及标签页仅指顶级窗口














，如果一个标签页包含多个iframe标签且他们属于同源页面                       ，那么他们之间是可以共享sessionStorage的  
   
   
   
   
   
   
   。 缺点：一旦窗口或标签页被永久关闭了
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，那么所有通过sessionStorage存储的数据也就被清空了 

 

 

 

 

 

 

 
。

将token存放在webstroage中





















，可以通过同域的js来访问

 

 

 

 

 

 

 

。这样会导致很容易受到 XSS攻击                ，特别是项目中引入很多 第三方js类库的情况下               。如果js脚本被盗用
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，攻击者就 可以轻易访问你的网站














，webStroage作为一种储存机制  
  
  
  
  
  
  
  ，在传输过程中不会执行任何安全标准 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

XSS攻击：cross-site Scripting (跨站脚本攻击） 是一种注入代码攻击















。恶意攻击者在目标网站生注入script代码 
  
  
  
  
  
  
  
，当访问者浏览网站的时候通过执行注入的script代码达到窃取用户信息


 


 


 


 


 


 


 

，盗用用户身份等                      。

3
 

 

 

 

 

 

 

 、存储在cookie 中

让它自动发送 
 
 
 
 
 
 
 ，不过缺点就是不能跨域

将token存放在cookie中可以指定httponly  
   
   
   
   
   
   
   
，来防止被javascript读取

 

 

 

 

 

 

 
，也可以指定secure 
 

 

 

 

 

 

 

 ，来保证token只在HTTPS下传输 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。缺点是不符合Restful 最佳实践               ，容易受到CSRF攻击






















。

CSRF跨站点请求伪造(Cross-Site Request Forgery)
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，跟XSS攻击一样














，存在巨大的危害性               。

简单来说就是恶意攻击者盗用已经认证过的用户信息                       ，以用户信息名义进行一些操作（如发邮件               、转账
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、购买商品等等） 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。由于身份已经认证过
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，所以目标网站会认为操作都是真正的用户操作的














。CSRF并不能拿到用户信息





















，它只是盗用的用户凭证去进行操作
  
  
  
  
  
  
  
 。

4














、Vuex

优点：vuex的数据存储在内存中                ，保密性较高 缺点：刷新页面(这里 的刷新页面指的是--> F5刷新,属于清除内存了)时vuex存储的值会丢失

总结：也就是说,localStorage可存储持久化的数据;sessionStorage仅限于当前窗口;vuex可存储保密性较高的数据
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，但刷新页面后数据会被清除.

三                       、token基本流程

（1）用户登陆,发送手机号码和验证码

（2）后台接收参数,查找用户,用户存在就生成token,返回给前端

（3）前端登陆成功,把token存到vuex(做持久化)

（4）使用axios拦截器,读取vuex中的token,并放入请求头

（5）请求其他接口,就会带上token

（6）后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据

（7）用户在下次使用app,如果token还在有效期内,不需要重新登陆

客户端使用用户名跟密码去请求登陆














，服务度段收到请求  
  
  
  
  
  
  
  ，去验证用户名和密码 
  
  
  
  
  
  
  
，验证成功后


 


 


 


 


 


 


 

，服务端会签发一个token 
 
 
 
 
 
 
 ，再把这个token发送给客户端  
   
   
   
   
   
   
   
，客户顿收到token之后能够把它存储起来

 

 

 

 

 

 

 
，

好比放在cookie里面或者local storage里面
 

 

 

 

 

 

 

 ，客户端每次向服务端请求资源的时候须要带上服务端签发的token               ，服务端收到请求
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，而后去验证客户端请求里面带着的token














，若是验证成功                       ，以某种方式好比随机生成32位的字符串做为token
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，存储在服务器中





















，并返回token到APP                ，

之后APP请求时
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，凡是须要验证的地方都要带上该token














，而后服务端验证token  
  
  
  
  
  
  
  ，成功返回所须要的结果 
  
  
  
  
  
  
  
，失败返回错误信息


 


 


 


 


 


 


 

，从新登陆 
 
 
 
 
 
 
 ，服务器上的token设置一个有效期  
   
   
   
   
   
   
   
，每次APP请求时都要验证token和有效期 
  
  
  
  
  
  
  。

以上为个人经验

 

 

 

 

 

 

 
，希望能给大家一个参考
 

 

 

 

 

 

 

 ，也希望大家多多支持本站 


 


 


 


 


 


 


 

。