基于vue3组合式开发，给我一个pinia和sessionStorage组合存储token的完整代码实例

<think>嗯，用户想要一个基于Vue3的组合式开发，结合Pinia和sessionStorage来存储token的完整代码示例。首先，我需要确认用户的需求。他们可能正在开发一个前端应用，需要管理用户的认证状态，而token是常用的认证机制之一。使用Pinia作为状态管理库，结合sessionStorage来持久化token，这样即使在页面刷新时，token也不会丢失，对吧？ 首先，我应该考虑如何将Pinia和sessionStorage结合起来。Pinia是Vue3推荐的状态管理库，支持组合式API。而sessionStorage用于浏览器会话期间的数据存储，关闭标签页后数据会被清除，这比localStorage更安全一些，适合存储临时凭证如token。 接下来，我需要创建一个Pinia store。用户可能希望这个store能够自动将token保存到sessionStorage，并且在初始化时从sessionStorage读取已有的token。这样，即使用户刷新页面，token仍然存在，不需要重新登录。 那在store的结构方面，应该有一个state来保存token，比如token: ref<string | null>(null)。然后，actions里面需要设置token的方法，比如setToken和clearToken。当设置token时，不仅要更新state，还要同步到sessionStorage。清除token时同理，要移除sessionStorage中的项并重置state。 另外，可能需要使用pinia的插件或者store的订阅功能来实现自动持久化。不过，直接在每个action中操作sessionStorage可能更直接，特别是对于这个简单的例子来说。这样代码会更清晰，容易理解。 然后，在main.ts中需要引入pinia，并注册到Vue实例中。用户可能已经知道这部分，但为了完整性，还是应该包含进来。 接下来要考虑的是，如何在组件中使用这个store。比如，在登录页面，提交表单后获取token，然后调用store的setToken方法。在需要认证的页面，比如用户信息页，从store中获取token，如果不存在则跳转到登录页。 另外，用户可能需要处理token的自动携带问题，比如在axios拦截器中设置请求头，但这可能超出了当前问题的范围。不过，用户可能后续会有这样的需求，所以或许可以简要提及，但当前问题主要关注存储部分。 关于代码结构，使用组合式API的话，store应该使用defineStore，并且使用ref来声明响应式状态。在设置token时，使用sessionStorage.setItem，而清除时使用removeItem。同时，在store初始化时，从sessionStorage中读取已有的token，这样页面刷新后状态可以保持。 可能的错误点包括：没有正确导入pinia或vue的相关函数，比如ref；在store中使用this时可能需要注意箭头函数的绑定问题，不过在setup函数中直接使用state变量应该没问题。另外，sessionStorage的键名需要保持一致，避免拼写错误。 测试部分，用户可能需要验证在设置token后，sessionStorage确实有值，并且刷新页面后store能正确读取。同时，清除token后，sessionStorage中的值也应该被移除，并且state更新为null。 最后，可能需要提供一个简单的组件示例，比如登录组件如何调用store的方法，以及另一个组件如何显示token或检查认证状态。这有助于用户理解如何在实际中使用这个store。 总结一下，步骤应该是：创建Pinia store，处理token的读取和写入sessionStorage，在main.ts注册store，然后提供组件使用示例。确保代码符合Vue3的组合式API风格，并正确使用TypeScript类型注解，提高代码的健壮性。</think>以下是一个基于Vue3组合式API + Pinia + sessionStorage实现token存储的完整方案： 1. 首先创建Pinia Store（建议在`src/store/authStore.ts`） ```typescript import { defineStore } from 'pinia' import { ref } from 'vue' export const useAuthStore = defineStore('auth', () => { // 从sessionStorage初始化token const token = ref<string | null>(sessionStorage.getItem('auth_token') || null) // 设置token方法 const setToken = (newToken: string) => { token.value = newToken // 同步到sessionStorage sessionStorage.setItem('auth_token', newToken) } // 清除token方法 const clearToken = () => { token.value = null // 清除sessionStorage sessionStorage.removeItem('auth_token') } // 判断是否登录的计算属性 const isAuthenticated = ref(!!token.value) return { token, setToken, clearToken, isAuthenticated } }) ``` 2. 在main.ts中注册Pinia ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App) app.use(pinia) app.mount('#app') ``` 3. 组件中使用示例（登录组件） ```vue <script setup lang="ts"> import { useAuthStore } from '@/store/authStore' const authStore = useAuthStore() const loginForm = reactive({ username: '', password: '' }) const handleLogin = async () => { try { // 模拟API请求 const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify(loginForm) }) const { token } = await res.json() // 存储token authStore.setToken(token) // 跳转到首页 router.push('/') } catch (error) { console.error('Login failed:', error) } } </script> ``` 4. 路由守卫示例（在router.ts中） ```typescript import { createRouter, createWebHistory } from 'vue-router' import { useAuthStore } from '@/store/authStore' const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置... ] }) router.beforeEach((to) => { const authStore = useAuthStore() // 需要登录但未登录 if (to.meta.requiresAuth && !authStore.isAuthenticated) { return '/login' } // 已登录访问登录页 if (to.path === '/login' && authStore.isAuthenticated) { return '/' } }) ``` 方案特点： 1. 响应式同步：token变更会自动更新sessionStorage 2. 类型安全：使用TypeScript进行类型约束 3. 持久化：页面刷新后仍保持登录状态 4. 自动清理：关闭浏览器标签页后自动清除 注意事项： 1. 敏感操作建议使用https 2. 生产环境建议增加token自动刷新机制 3. 建议配合axios拦截器自动携带token 4. 重要接口仍需后端验证token有效性 这个方案实现了： - Token的响应式存储 - 浏览器会话级持久化 - 自动登录状态管理 - 路由访问控制 - 良好的类型支持 可根据具体业务需求扩展refreshToken机制、自动续期等功能。