前端Token存储问题

文章对比了前端存储Token的三种方式:Vuex、localStorage和sessionStorage。localStorage数据永久存在,适合持久化存储,但不同浏览器间无法共享;sessionStorage局限于当前窗口,数据在窗口关闭后清除;Vuex数据存储在内存,保密性好但刷新后丢失。根据需求,sessionStorage可能是最佳选择,因为它能在不关闭窗口的情况下持久化存储,同时不会因新开页面而替换原有token。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

存储位置有: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区别

  1. localStorage:可以持久化保存token,需要在重新登录时,清除原有的localStorage数据;但如果打开新的页面(新窗口)重新登录其他账号,会替换原有的token;
  2. vuex:保密性高,不会因为打开其他页面清除token,但页面刷新会清除token。
    注:可以尝试在监听页面刷新前,将vuex存在localStorage,刷新后再获取并删除token
  3. sessionStorage:在不关闭窗口的情况,可以持久化保存token,也需要在重新登录时,清除原有的sessionStorage数据;但打开新的页面(新窗口)重新登录其他账号,不会替换原有token;也不会因为刷新页面清除token
    注:如果复制页面的话,两个页面会共享sessionStoage中的数据,综合上述分析:token最好是保留在sessionStorage中
### 前端 Token 实现及管理方法 在现代 Web 应用开发中,Token 是一种常见的身份认证机制。以下是关于前端如何实现和管理 Token 的详细介绍。 #### 1. Token 的基本工作原理 当用户成功登录后,服务器会返回一个 Token 给客户端[^1]。此后,客户端每次向服务端发送请求时都会携带该 Token,而不再需要提供用户名和密码。这种设计减少了敏感信息在网络中的传输次数,从而提高了安全性。 #### 2. Token 的组成结构 通常来说,简单的 Token 可能只包含一些基础字段,比如用户的唯一标识符或者有效期等。然而更复杂的安全方案则倾向于采用 JSON Web Tokens (JWT),它由三部分构成:头部(Header)、载荷(Payload)以及签名(Signature)。每部分内容均经过 Base64 编码处理以便于网络传输[^3]。 #### 3. 刷新过期的 Token 为了应对长时间未操作导致令牌失效的情况,许多应用引入了自动刷新机制。具体而言,可以通过 Axios 进行全局 HTTP 请求拦截器设置,在检测到响应状态表明当前使用的 Access Token 已经到期时触发 Refresh Token 流程重新获取新的访问权限凭证[^2]。 #### 4. 存储位置的选择 对于存储 Token 来说有几种常见的方式可供选择: - **LocalStorage**: 将 Token 放置于此处可以使其跨页面共享,并且即使关闭标签页也不会消失直到手动清除为止;不过由于其暴露风险较高所以一般仅限短期保存。 - **SessionStorage**: 和 LocalStorage 类似只是生命周期限定在一个单独浏览会话期间结束即销毁因此更加安全些但同样存在局限性无法满足长期需求场景下的要求。 - **Cookies**: 设置 HttpOnly 属性能够防止 JavaScript 访问 Cookies 数据进而降低 XSS 攻击带来的威胁程度同时还可以利用 SameSite 参数控制跨域行为进一步增强防护效果[^4]. #### 5. 客户端验证逻辑 每当接收到一个新的 API 调用请求时都应该先检查是否存在有效的授权标记(Token)如果没有的话就需要跳转回登陆界面让用户输入账号密码完成新一轮的身份确认过程之后再继续执行后续动作之前提到过的那些措施都是围绕着这一核心目标展开的具体实施方案而已。 ```javascript // 示例代码展示如何使用Axios进行Token刷新 import axios from 'axios'; const instance = axios.create(); instance.interceptors.response.use( response => { return response; }, error => { const originalRequest = error.config; if(error.response.status === 401 && !originalRequest._retry){ originalRequest._retry = true; // 防止无限循环 return new Promise((resolve, reject)=>{ axios.post('/refresh_token', { refreshToken: localStorage.getItem('refreshToken') }) .then(res=>{ if(res.data.accessToken){ localStorage.setItem('accessToken', res.data.accessToken); originalRequest.headers['Authorization'] = `Bearer ${res.data.accessToken}`; resolve(axios(originalRequest)); }else{ window.location.href="/login"; reject(); } }).catch(err=>{window.location.href="/login";reject();}); }); } return Promise.reject(error); } ); export default instance; ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值