一、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和有效期。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。