如何限制MSAL在LocalStorage中存储的认证信息内容

要在继续使用LocalStorage的前提下过滤敏感缓存内容，核心思路是基于MSAL的自定义缓存插件机制，拦截并修改缓存的写入/读取逻辑，同时单独保留路由权限控制所需的角色信息。以下是具体实现步骤：

1. 自定义LocalStorage缓存插件 #

创建一个缓存插件，拦截MSAL的缓存操作，过滤掉敏感字段或条目，只保留必要的认证信息：

// src/utils/customLocalStorageCache.js
import { ICachePlugin } from "@azure/msal-browser";

// 自定义缓存处理逻辑
const customLocalStorageCache = () => {
  const setItem = async (key, value) => {
    let processedValue = value;

    // 过滤account条目中的敏感字段（如homeAccountId、realm）
    if (key.includes("account")) {
      processedValue = {
        ...value,
        homeAccountId: undefined,
        realm: undefined,
        // 保留用户名、角色等权限控制所需字段
        username: value.username,
        idTokenClaims: { roles: value.idTokenClaims?.roles }
      };
    }

    // 跳过存储敏感的token类条目（如idToken、accessToken）
    if (key.includes("idToken") || key.includes("accessToken")) {
      return Promise.resolve();
    }

    // 存储处理后的内容到LocalStorage
    localStorage.setItem(key, JSON.stringify(processedValue));
    return Promise.resolve();
  };

  const getItem = async (key) => {
    // 读取敏感条目时返回空，避免MSAL流程报错
    if (key.includes("idToken") || key.includes("accessToken")) {
      return Promise.resolve(null);
    }
    const item = localStorage.getItem(key);
    return Promise.resolve(item ? JSON.parse(item) : null);
  };

  const removeItem = async (key) => {
    localStorage.removeItem(key);
    return Promise.resolve();
  };

  const clear = async () => {
    localStorage.clear();
    return Promise.resolve();
  };

  return { setItem, getItem, removeItem, clear };
};

export default customLocalStorageCache;

2. 修改authConfig配置，注入自定义缓存 #

在你的认证配置文件中，指定cacheLocation为LocalStorage，同时引入自定义缓存插件：

// src/authConfig.js
import { PublicClientApplication } from "@azure/msal-browser";
import customLocalStorageCache from "./utils/customLocalStorageCache";

export const msalConfig = {
  auth: {
    clientId: "你的客户端ID",
    authority: "你的Azure AD授权地址",
    redirectUri: "你的重定向地址"
  },
  cache: {
    cacheLocation: "LocalStorage",
    storeAuthStateInCookie: false,
    customCachePlugin: customLocalStorageCache() // 注入自定义缓存
  }
};

export const pca = new PublicClientApplication(msalConfig);

3. 单独存储角色信息用于路由权限校验 #

由于路由守卫需要基于用户角色判断权限，建议在登录成功后单独提取角色信息存储到LocalStorage，避免依赖MSAL的缓存：

// 登录成功回调（可在App.jsx或登录组件中实现）
const handleLoginSuccess = (response) => {
  const userRoles = response.account?.idTokenClaims?.roles || [];
  localStorage.setItem("userRoles", JSON.stringify(userRoles));
};

然后在RouteGuard组件中，直接读取这个独立存储的角色信息做权限校验：

// src/components/RouteGuard.jsx
import { Navigate } from "react-router-dom";

const RouteGuard = ({ children, allowedRoles }) => {
  const userRoles = JSON.parse(localStorage.getItem("userRoles")) || [];
  const hasPermission = allowedRoles.some(role => userRoles.includes(role));

  if (!hasPermission) {
    return <Navigate to="/unauthorized" replace />;
  }

  return children;
};

export default RouteGuard;

4. 关键注意事项 #

• MSAL流程兼容性：部分敏感字段是MSAL内部会话管理所需，若完全排除导致登录/刷新令牌异常，可改为对敏感字段加密存储（比如用crypto-js加密后再写入LocalStorage）。
• 登出清理：用户登出时需同步清理自定义存储的角色信息：

  const handleLogout = () => {
    pca.logout();
    localStorage.removeItem("userRoles");
  };
  

• 缓存键适配：不同版本MSAL的缓存键格式可能有差异，可通过浏览器开发者工具查看LocalStorage中的实际键名，调整插件中的过滤逻辑。

内容的提问来源于stack exchange，提问作者Skadoosh