前端加密存储：vue-pure-admin中用户信息安全处理方案-优快云博客

前端加密存储：vue-pure-admin中用户信息安全处理方案

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

在现代Web应用中，用户信息的安全存储是前端开发不可忽视的重要环节。vue-pure-admin作为一款企业级中后台管理系统模板，采用了多层次的安全存储策略，确保用户凭证和敏感信息得到妥善保护。本文将深入剖析vue-pure-admin中的用户信息安全处理方案，展示如何在前端实现安全可靠的用户数据管理。

安全存储架构概览

vue-pure-admin采用了"双存储+自动过期"的安全架构，将用户信息分散存储在Cookie和LocalStorage中，结合时效性控制确保数据安全。核心实现位于src/utils/auth.ts文件中，通过setToken和getToken等方法构建完整的安全存储体系。

该架构主要特点包括：

短期访问凭证(accessToken)存储在Cookie中，利用浏览器自动过期机制
用户基本信息存储在LocalStorage中，便于前端快速访问
采用refreshToken机制实现无感刷新，减少敏感凭证暴露风险
多标签页登录状态同步，提升用户体验的同时确保安全性

数据模型设计

系统定义了清晰的用户数据模型，规范了存储信息的结构和类型。在src/utils/auth.ts中定义的DataInfo接口如下：

export interface DataInfo<T> {
  /** token */
  accessToken: string;
  /** `accessToken`的过期时间（时间戳） */
  expires: T;
  /** 用于调用刷新accessToken的接口时所需的token */
  refreshToken: string;
  /** 头像 */
  avatar?: string;
  /** 用户名 */
  username?: string;
  /** 昵称 */
  nickname?: string;
  /** 当前登录用户的角色 */
  roles?: Array<string>;
}

这种类型化的设计确保了数据的完整性和一致性，为安全存储打下了基础。

双存储策略实现

Cookie存储敏感凭证

短期访问凭证accessToken和刷新令牌refreshToken存储在Cookie中，利用Cookie的自动过期机制控制有效期：

// 设置Cookie存储的凭证信息
expires > 0
  ? Cookies.set(TokenKey, cookieString, {
      expires: (expires - Date.now()) / 86400000
    })
  : Cookies.set(TokenKey, cookieString);

这种设计的优势在于：

自动过期机制减少了长期存储的安全风险
相较于LocalStorage，Cookie更不易受到XSS攻击的直接获取
支持跨域设置，便于复杂系统架构下的认证需求

LocalStorage存储用户信息

用户基本信息如头像、用户名和角色等非敏感数据存储在LocalStorage中，通过src/utils/auth.ts中的storageLocal工具进行管理：

// 设置LocalStorage存储的用户信息
storageLocal().setItem(userKey, {
  refreshToken,
  expires,
  avatar,
  username,
  nickname,
  roles
});

LocalStorage提供了更大的存储容量，适合存储用户界面所需的各类信息，同时通过src/store/modules/user.ts中的状态管理，实现了数据的响应式访问。

登录状态管理

用户登录状态通过Pinia状态管理库进行集中管理，相关实现位于src/store/modules/user.ts。系统在初始化时会从存储中恢复用户信息：

state: (): userType => ({
  // 头像
  avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",
  // 用户名
  username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
  // 昵称
  nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
  // 页面级别权限
  roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
  // ...其他状态
})

这种设计确保了页面刷新后用户状态的无缝恢复，同时通过TypeScript的类型检查保证了数据访问的安全性。

安全退出机制

系统实现了完善的退出机制，确保用户退出时彻底清除所有存储的敏感信息：

/** 前端登出（不调用接口） */
logOut() {
  this.username = "";
  this.roles = [];
  removeToken();
  useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
  resetRouter();
  router.push("/login");
}

src/store/modules/user.ts中的logOut方法不仅清除了存储的用户信息，还重置了路由状态，确保退出的彻底性。

无感刷新与安全增强

为平衡安全性和用户体验，系统实现了基于refreshToken的无感刷新机制。当accessToken过期时，系统会自动使用refreshToken获取新的访问凭证，避免频繁登录：

/** 刷新`token` */
async handRefreshToken(data) {
  return new Promise<RefreshTokenResult>((resolve, reject) => {
    refreshTokenApi(data)
      .then(data => {
        if (data) {
          setToken(data.data);
          resolve(data);
        }
      })
      .catch(error => {
        reject(error);
      });
  });
}

这种机制既缩短了敏感凭证的暴露时间，又保证了良好的用户体验。

多标签页状态同步

系统通过multipleTabsKey实现了多标签页间的登录状态同步，当用户在一个标签页登录或退出时，其他标签页能自动感知状态变化：

Cookies.set(
  multipleTabsKey,
  "true",
  isRemembered
    ? {
        expires: loginDay
      }
    : {}
);

这一特性通过Cookie的跨标签页共享能力实现，既提升了用户体验，又确保了多标签页环境下的安全性。

总结与最佳实践

vue-pure-admin的用户信息安全处理方案体现了以下前端安全存储最佳实践：

敏感信息分级存储：将不同安全级别的信息存储在不同位置，实现风险隔离
自动过期机制：利用Cookie的过期特性控制敏感凭证的生命周期
类型化数据管理：通过TypeScript接口确保数据完整性和安全性
状态集中管理：使用Pinia统一管理用户状态，避免数据分散导致的安全隐患
无感刷新机制：平衡安全性和用户体验的关键设计

通过这些措施，vue-pure-admin构建了一套完整的前端用户信息安全存储体系，为企业级应用提供了可靠的安全保障。开发者在使用过程中，还应根据具体业务需求，进一步加强安全策略，如增加数据加密传输、实现更严格的权限控制等，共同构建安全可靠的Web应用。

完整的实现代码可参考：

src/utils/auth.ts：安全存储核心实现
src/store/modules/user.ts：用户状态管理

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考