登录状态的实现是java生成一个token而后前端在发送请求时将token带入请求头去请求数据,若是token失效则没法返回。javascript
在前端这里,咱们须要用本地存储将token暂时存起来,发送请求的时候再读取。对于vue项目,vuex在刷新的时候就会初始化。因此只能用浏览器存储方式才可让token一直存在。前端
localstorage和session的区别为 页面关闭后localstorage还存在。session在页面关闭以后就被销毁了。vue
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中java
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中vuex
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中后端
若是需求要求页面关闭 将token存储在session中就能够了若是有要求过时时间 也好办浏览器
若是有要求退出后必定时间后仍是登录状态,在后端设置过时时间,使用localstorage 存储cookie便可,token过时时,在http拦截器中设置清楚token便可缓存
关键点在这里:cookie的存储空间比localstorage小 并且功能也同样, 可是cookie能够经过设置共享域,实现二级域名共享cookie数据。这样就能够实现部署在同一个域名下不一样的二级域名登陆状态互通。cookie
我用的是 js-cookiessession
这里写上 js-cookies 代码
cookies.set('token', '这里是你的token', {path: '/',domain: '.jd.com'})
cookies.remove('token', { path: '/', domain: '.jd.com' })
复制代码
path为cookie目录 目前还没学会设置这个
domain为cookie共享域的一级域名。这里用京东示例
cookie清除函数要设置为和cookie写入函数一样的做用域才能移除要移除的属性
总结:固然喽 cookie的存储空间有限,用的时候要当心空间不够,只存储token固然是没问题的,二级域名共享cookie能够帮咱们缓存更多的东西,可是存储大量内容的时候必定要注意计算cookie空间,避免没必要要的麻烦