登陆状态的实现是java生成一个token然后前端在发送请求时将token带入请求头去请求数据,如果token失效则无法返回。
在前端这里,我们需要用本地存储将token暂时存起来,发送请求的时候再读取。对于vue项目,vuex在刷新的时候就会初始化。所以只能用浏览器存储方式才可以让token一直存在。
localstorage和session的区别为 页面关闭后localstorage还存在。session在页面关闭之后就被销毁了。
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中
要注意:vue destroyed钩子函数在页面刷新时也会执行,不要将清除localstorage 的函数写在destroyed函数中
如果需求要求页面关闭 将token存储在session中就可以了如果有要求过期时间 也好办
如果有要求退出后一定时间后还是登陆状态,在后端设置过期时间,使用localstorage 存储cookie即可,token过期时,在http拦截器中设置清楚token即可
关键点在这里:cookie的存储空间比localstorage小 而且功能也一样, 但是cookie可以通过设置共享域,实现二级域名共享cookie数据。这样就可以实现部署在同一个域名下不同的二级域名登录状态互通。
我用的是 js-cookies
这里写上 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空间,避免不必要的麻烦