存储位置有：vuex,localStorage和sessionStorage
对比：

localStorage
优点：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）。
缺点：同一个属性名的数据会被替换，不同浏览器无法共享localStorage或sessionStorage中的信息。
sessionStorage
优点：sessionStorage生命周期为当前窗口或标签页，sessionStorage的数据不会被其他窗口清除，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
缺点：一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
Vuex
优点：vuex的数据存储在内存中,保密性较高
缺点：刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失
总结:也就是说,localStorage可存储持久化的数据;sessionStorage仅限于当前窗口;vuex可存储保密性较高的数据,但刷新页面后数据会被清除

token分别存储在vuex,localStorage和sessionStorage区别

localStorage：可以持久化保存token，需要在重新登录时，清除原有的localStorage数据；但如果打开新的页面（新窗口）重新登录其他账号，会替换原有的token；
vuex：保密性高，不会因为打开其他页面清除token，但页面刷新会清除token。
注:可以尝试在监听页面刷新前,将vuex存在localStorage,刷新后再获取并删除token
sessionStorage：在不关闭窗口的情况，可以持久化保存token，也需要在重新登录时，清除原有的sessionStorage数据；但打开新的页面（新窗口）重新登录其他账号，不会替换原有token；也不会因为刷新页面清除token
注:如果复制页面的话,两个页面会共享sessionStoage中的数据，综合上述分析：token最好是保留在sessionStorage中

前端Token存储问题相关推荐

前端token刷新并发处理
添加中间件,处理多个前端来的请求时,如果token需要刷新,先查看缓存,如果没有就在redis中做个标志位进行短期缓存,其他的请求发现缓存中的token,就不再刷新token了.这样就避免了重复刷新t ...
vue登录如何存储cookie_vue保持用户登录状态（各种token存储方式）
而作为前端,存储这些值同样有多种方式,你可以存在Cookie.LocalStorage.SessionStorage或者Vuex状态管理器中,当然他们的作用也不同怎么设置Cookie HttpRes ...
vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中
需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了目录请求存储token: 请求拦截,及请求错误的响 ...
前端战五渣学JavaScript——前端数据存储
说起前端数据存储,那就不得不提到Cookie.sessionStorage和localStorage,这是我们接触到的最熟悉的前端数据存储的单词,作为一个前端开发.前端工程师,这三个单词用没用过先不管 ...
springboot +vue实现token登录1之vue的token存储
0.写在前面在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前 ...
前端 - token 是什么？为什么每次请求头（HEADS）里要携带它？___请求时，为什么要携带token？
前端 - token 是什么?为什么每次请求头(HEADS)里要携带它? Token token 是客户端频繁向服务器端请求数据,服务器频繁的去数据库查询用户名和密码进行对比,判断用户名和密码正确与否 ...
Web前端数据存储—cookie机制（设置，获取，删除cookie）
今天看到cookie机制就来记录一下,我们前端一般存储cookie都是在登录的时候进行的,两种,选一个就行(其实都一样,只不过一个明细化了). 我们先了解一下 cookie: HTTPCookie,通 ...
前端token知识：token如何存储？token过期如何处理？
一.前后端交互的过程中token如何存储? 方法1:存在 cookie 中 cookie的大小约4k,兼容性在ie6及以上都兼容,在浏览器和服务器间来回传递,因此它得在服务器的环境下运行,而且可以设 ...
前端token知识梳理：token如何存储？token过期如何处理？如何无感知刷新token？
在前后端是以token(令牌)的形式交互的,既然是token,是有过期时间的(为了接口数据的安全, 服务器的token不会设置太久,根据需要一般是1-7天),没有一个token是永久的,永久的toke ...

前端Token存储问题

token分别存储在vuex,localStorage和sessionStorage区别

前端Token存储问题相关推荐

最新文章

热门文章