1. LocalStorage：
- 优点：简单易用，数据可以持久化，关闭浏览器后仍然存在。
-
缺点：安全性较低，容易受到XSS（跨站脚本攻击）。
示例代码：
// 存储 Token
localStorage.setItem('token', token);
// 获取 Token
const token = localStorage.getItem('token');
// 移除 Token
localStorage.removeItem('token');
2. SessionStorage：
-
优点：与 LocalStorage 类似，但仅在会话期间有效，关闭浏览器或标签页后，数据会被清除。
-
缺点：同样容易受到XSS攻击。
示例代码：
// 存储 Token
sessionStorage.setItem('token', token);
// 获取 Token
const token = sessionStorage.getItem('token');
// 移除 Token
sessionStorage.removeItem('token');
3. Cookies：
-
优点：可以设置 HttpOnly 属性，使其无法通过 JavaScript 访问，提高安全性，且可以设置过期时间。
-
缺点：容量有限（通常为4KB），同样容易受到CSRF（跨站请求伪造）攻击。
示例代码（使用
js-cookie库）：
import Cookies from 'js-cookie';
// 存储 Token
Cookies.set('token', token, { expires: 7 });
// 获取 Token
const token = Cookies.get('token');
// 移除 Token
Cookies.remove('token');
4. Vuex 或其他状态管理库:
-
优点：适用于单页面应用中的临时存储，便于管理和维护，数据存储在内存中，不会持久化到浏览器存储中。
-
缺点：刷新页面后数据丢失，需要与其他持久化存储技术结合使用。
示例代码：
// 存储 Token
this.store.commit('setToken', token);
// 获取 Token
const token = this.store.state.token;
// 移除 Token
this.$store.commit('removeToken');
Vuex 相关的 Mutations：
// store.js
const state = {
token: ''
};
const mutations = {
setToken(state, token) {
state.token = token;
},
removeToken(state) {
state.token = '';
}
};
export default {
state,
mutations
};
在实际应用中，可能会结合多种技术以平衡安全性和便捷性。例如，可以使用 Vuex 管理 Token 的临时状态，并在用户登录后将 Token 存储到 LocalStorage 或 Cookies 中。需要注意的是，始终应采取措施保护 Token，防止潜在的安全漏洞。
5. Vuex存储Token带来的问题以及解决方式
Vuex 是一个用于管理 Vue 应用状态的库。它将应用的状态存储在内存中，这意味着在页面刷新或关闭浏览器标签页后，存储在 Vuex 中的数据会丢失。原因是浏览器刷新页面时，会重新加载整个 JavaScript 应用，包括 Vuex 的状态，导致之前存储的数据被清除。
为了在页面刷新后仍能保留 Vuex 中的状态数据（例如 token），通常需要将数据持久化到浏览器的持久化存储中，如 LocalStorage 或 Cookies。然后，在应用加载时（例如在 Vue 的 created 生命周期钩子中），从持久化存储中恢复这些数据到 Vuex。
下面是一个示例，演示如何在 Vuex 中存储 token 并在页面刷新时从 LocalStorage 恢复 token。
5.1 在 Vuex 中存储和恢复 Token
创建 Vuex Store
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: localStorage.getItem('token') || ''
},
mutations: {
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token); // 存储 token 到 LocalStorage
},
removeToken(state) {
state.token = '';
localStorage.removeItem('token'); // 从 LocalStorage 移除 token
}
}
});
export default store;
在 Vue 实例中使用 Vuex Store
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
store,
render: h => h(App),
}).$mount('#app');
5.2 在组件中使用 Vuex Store
设置和移除 Token
// 在某个组件中，例如 Login.vue
<template>
<div>
<button @click="login">Login</button>
<button @click="logout">Logout</button>
</div>
</template>
<script>
export default {
methods: {
login() {
const token = 'example-token'; // 实际应用中应从服务器获取
this.store.commit('setToken', token);
},
logout() {
this.store.commit('removeToken');
}
}
}
</script>
获取 Token
// 在另一个组件中，例如 Profile.vue
<template>
<div>
<p>Token: {{ token }}</p>
</div>
</template>
<script>
export default {
computed: {
token() {
return this.$store.state.token;
}
}
}
</script>
通过这种方式，token 会在 Vuex 中存储，并在每次页面刷新时从 LocalStorage 恢复，确保用户的登录状态不会因刷新页面而丢失。
文章评论