uniapp登录持久化

### UniApp 中实现登录状态持久化的方法 在 UniApp 项目中，为了确保用户的登录状态能够在页面刷新或者重新打开应用时不丢失，通常会采用本地存储技术配合 Pinia 状态管理库来完成这一功能。具体来说，在用户成功登录后，除了将必要的身份验证信息保存到内存中的 Pinia Store 外，还需要将其同步至浏览器的 `localStorage` 或者 `sessionStorage`。 对于基于 Vue.js 的框架如 UniApp 而言，当涉及到全局性的数据共享时，推荐使用专门的状态管理模式——Pinia[^1]。它不仅简化了组件间通信的过程，而且提供了更好的可维护性和扩展性。下面介绍一种利用 Pinia 和 localStorage 结合的方式来进行登录态持久化的方案： #### 创建并初始化 Pinia Store 首先定义一个用于处理用户认证逻辑的 store 文件，比如命名为 user.ts: ```typescript // stores/user.ts import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ token: '', userId: '' }), actions: { setUser(data) { this.token = data.token; this.userId = data.id; // 将当前用户的信息存入 localstorage localStorage.setItem('authInfo', JSON.stringify({ token: this.token, id: this.userId })); }, delUser() { this.token = ''; this.userId = ''; // 清除localstorage里的记录 localStorage.removeItem('authInfo'); } } }); ``` 这段代码展示了如何创建一个新的 Pinia Store 并设置两个主要属性 (`token`, `userId`) 来表示已登录用户的凭证和唯一标识符。同时实现了两个方法：`setUser()` 用来接收来自服务器响应的数据对象并将它们赋给对应的属性值；而 `delUser()` 则负责清除这些信息以便于注销操作后的清理工作[^3]。 #### 初始化加载已有登录状态 为了让应用程序能够记住之前的登录情况，在每次启动或刷新页面之前都应该检查是否有残留的有效令牌存在于客户端环境中。可以在 App.vue 生命周期钩子函数 created 内部执行此任务： ```javascript <script setup lang="ts"> import { onMounted, ref } from 'vue' import { useUserStore } from './stores' const store = useUserStore() onMounted(() => { let authDataStr = window.localStorage.getItem('authInfo') if (authDataStr !== null && authDataStr.length > 0){ try{ var parsedAuthData = JSON.parse(authDataStr); console.log(parsedAuthData); // 更新store内的state store.setUser(parsedAuthData); }catch(e){ console.error("Failed to parse stored authentication info", e.message); } } }) </script> ``` 上述脚本会在实例挂载完成后立即读取可能存在的缓存条目，并调用相应的 action 函数恢复先前的状态。如果解析失败，则打印错误日志而不影响正常流程继续运行。 通过这种方式，即使是在关闭浏览器后再回来访问网站的情况下，只要未主动登出过，那么系统依旧能识别出该访客的身份从而提供个性化的服务体验。