持久化token

本文介绍了在Vue.js应用程序中如何实现token的持久化处理,确保页面刷新后仍能保持登录状态。主要策略包括:初始化时优先从本地存储读取token,设置token时同时更新vuex和本地存储,退出时统一清除vuex及本地存储的token。通过这种方法,可以有效管理和维护用户的登录状态。

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

因为页面刷新token会丢失,所以需要持久化处理token

思路:

  1. 在对token进行初始化的时候先从本地取一下,优先使用本地取到的值
  2. 在设置token的时候除了在vuex中存一份,在本地也同步存一份
  3. 在删除token的时候除了把vuex中的删除掉,把本地的也一并删除

1.在utils/auth.js中,提供获取token,设置token的两个方法

2.在vuex中引入方法,并存储token

import { getToken, setToken } from '@/utils/auth' // 持久化处理token

3.退出的时候删除token,只需要把空字符串传入vuex里面就可以

 

### 实现Token登录状态持久化的最佳实践 为了确保应用程序的安全性和用户体验,在实现Token登录状态持久化时应考虑多个方面。通常的做法是在客户端保存访问令牌(Access Token),以便用户无需频繁重新输入凭证即可继续使用服务。 #### 使用本地存储机制保存Token 对于Web应用而言,可以利用浏览器提供的几种不同的存储选项来保持用户的会话: - **LocalStorage**: 将JWT或其他类型的token存入`localStorage`中是最简单的方法之一。这种方式适合短期存活的场景,因为数据不会过期除非手动清除[^1]。 ```javascript localStorage.setItem('authToken', 'your_jwt_token_here'); ``` - **SessionStorage**: 类似于`localStorage`,但是当页面关闭后数据会被自动删除。适用于希望在浏览器标签页内维持较短时间的有效性的场合。 - **Cookies**: 设置带有HttpOnly标志的cookie能够有效防止XSS攻击,并且可以通过Secure属性确保仅通过HTTPS传输。这是推荐的方式用于保护敏感信息如认证token[^2]。 ```http Set-Cookie: auth-token=your_jwt_token; HttpOnly; Secure; ``` #### 刷新Token机制 除了管理当前使用的access token外,还需要设计一套刷新策略以延长合法会话的时间长度而不暴露过多风险。常见的做法是发放一对tokens——一个是短暂有效的access token以及另一个长期存在的refresh token。一旦access token到期,则可通过提交refresh token换取新的pair[^3]。 ```json { "accessToken": "short-lived-access-token", "refreshToken": "longer-lasting-refresh-token" } ``` 服务器端应当验证收到的refresh token并确认其有效性之后才签发新一批tokens。这一步骤同样需要遵循严格的身份验证流程,比如检查IP地址一致性或者其他上下文因素。 #### 安全注意事项 在整个过程中始终要重视安全性考量: - 对所有涉及个人隐私的数据采取加密措施; - 配置合适的CORS政策限制跨域资源共享; - 应用最新的OWASP Top Ten指南防范已知漏洞。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值