Vue中保存toke的常见方法-数据会在浏览器关闭后依然存在-- 支持跨页面存取数据
作者：机器人技术佬 |
发布时间：2025-07-02 |
Vue中保存token的常见方法
在Vue项目中，保存token有几种常见的方法，每种都有其特点和适用场景。下面我们来逐一介绍。
一、使用LocalStorage
LocalStorage可以保存数据到浏览器的本地存储中，数据会在浏览器关闭后依然存在。
设置token：
```javascript
localStorage.setItem('token', 'your_token_here');
```
获取token：
```javascript
const token = localStorage.getItem('token');
```
删除token：
```javascript
localStorage.removeItem('token');
```
优点：
- 数据持久性强，浏览器关闭后数据仍然存在。
缺点：
- 安全性较低，容易被XSS攻击获取。
二、使用SessionStorage
SessionStorage与LocalStorage类似，但数据会在页面会话结束后被清除。
设置token：
```javascript
sessionStorage.setItem('token', 'your_token_here');
```
获取token：
```javascript
const token = sessionStorage.getItem('token');
```
删除token：
```javascript
sessionStorage.removeItem('token');
```
优点：
- 安全性较高，数据仅在会话期间存在。
缺点：
- 数据在浏览器或标签页关闭后消失。
三、使用Vuex
Vuex是Vue.js的状态管理库，适合管理全局状态。
安装Vuex：
```bash
npm install vuex --save
```
配置Vuex：
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: 'your_token_here'
},
mutations: {
setToken(state, newToken) {
state.token = newToken;
}
},
actions: {
saveToken({ commit }, token) {
commit('setToken', token);
}
}
});
```
使用Vuex存取token：
```javascript
store.dispatch('saveToken', 'your_token_here');
```
优点：
- 适合管理全局状态，方便组件间共享数据。
缺点：
- 数据在页面刷新后会丢失，需要配合LocalStorage或SessionStorage使用。
四、使用Cookies
Cookies可以设置过期时间，适用于需要跨页面的数据存储。
安装js-cookie库：
```bash
npm install js-cookie --save
```
使用Cookies存取token：
```javascript
// 设置cookie
Cookies.set('token', 'your_token_here', { expires: 1 });
// 获取cookie
const token = Cookies.get('token');
// 删除cookie
Cookies.remove('token');
```
优点：
- 可以设置过期时间，控制数据的生命周期。
- 支持跨页面存取数据。
缺点：
- 安全性较低，容易被XSS攻击获取。
总结
在Vue中保存token的方法各有优缺点，具体选择哪种方法要根据应用的需求和安全性要求来决定。同时，为了确保安全性，建议采取额外的安全措施，如服务器端验证和定期清理敏感数据。