登录完成之后
如果很急可以直接看总结 先实现token存储在vuex中
PS:TOKEN_KEY为枚举变量 存储位置:
调用setAuthCache(TOKEN_KEY, info);存储在缓存里
进入判断模式,判断是存储在SessionStorage里还是LocalStorage里
isLocal:
permissionCacheType:
CacheTypeEnum.LOCAL
进入存储在LocalStorage的模式,调用Persistent.setLocal传入三个参数key,value, true,看看Persistent.setLocal,文件位置:
该方法里实现了存储在缓存以及本地存储,继续看localMemory.set(key, toRaw(value)),文件位置:
这里存储在缓存,首先通过key获取原本的缓存,判断有效期是否为空如果是就给他重新附上存活期,如果说原本的缓存存在就去判断是否超时如果是就重新将value覆盖掉,如果说原本就没有缓存就存下来;再次判断有效期是否为空,如果为空直接返回value(这里不太懂,如果有知道的评论区回复~),也就是token值,获取现在的时间,修改存储的时间->判断有效期是否大于现在如果是就用之前的,不是就现在+有效期重新附上,然后设置超时ID,设置一个定时器,在expires-now的时间段后触发移除key也就是这个token,至此将token存储在cache的操作完成。
继续ls.set也就是存储在localStorage里
第三个参数默认是false,我们之前调用传了第三个参数为true,看ls:
目前create(createOptions(storage, options));完成了参数的添加,使用了es6的扩展运算符添加了配置项,create方法在:
在该文件里通过开发模式来决定是否将存储在localStorage里的数据是否进行加密
这里加密引入了crypto-js负责加密解密
总结
- vuex存储了,新建了memory类存储了,还存储到了localStorage里,只存vuex不行,页面一刷新就会初始化,那么有可能就会回到登陆页面
- 存储在本地有设置有效期,并且会加密,避免token泄露直接能够使用
- vben里存储token的逻辑很强,层层封装,像是对于是否加密,有另外设置参数存放在settings文件夹下,独立出来,之后无论是业务需要更改,我们都能快速修改参数
- 使用token那么避免了CSRF攻击(这个攻击利用的就是浏览器发起请求会携带上cookie来伪造进行攻击的没拿到cookie),没有将token存储在cookie中,有效缓解了XSS攻击(通过获取用户的cookie伪造用户进行登录实现攻击),存储在本地并且进行了加密(引入第三方库crypto-js)以及有效期的设置
- 写在最后,可以学习一下登录安全处理办法和封装思想