React+Express认证优化：解决重复请求与本地存储篡改问题

核心思路 #

前端的authenticated状态仅作为UI渲染的缓存，真正的权限校验完全依赖后端会话中间件。通过「初始化校验+全局错误拦截」的方式，既避免重复请求，又能及时同步认证状态，同时彻底解决localStorage篡改的问题。

后端实现：保留核心校验，新增初始化接口 #

1. 精细化权限校验中间件：不要全局挂载，只给需要认证的路由使用，避免无意义的校验开销

// 权限校验中间件
const requireAuth = (req, res, next) => {
  console.log('Checking session...');
  if (!req.session.authenticated) {
    const err = new Error('Not authenticated!');
    err.status = 401;
    return next(err);
  }
  next();
};

// 示例：给受保护路由挂载中间件
app.use('/api/protected', requireAuth);

2. 新增会话状态接口：供前端启动时调用一次，获取真实的认证状态

app.get('/api/session-status', (req, res) => {
  // 直接返回会话中的真实状态
  res.json({ authenticated: !!req.session.authenticated });
});

前端实现：初始化同步+全局错误拦截 #

1. AuthContext初始化校验：应用启动时调用一次会话接口，同步真实状态，localStorage仅做缓存（可选）

const AuthProvider = ({ children }) => {
  const [authData, setAuthData] = useState({ 
    authenticated: JSON.parse(localStorage.getItem('authenticated')) || false 
  });

  // 应用加载时校验真实会话状态
  useEffect(() => {
    const syncSession = async () => {
      try {
        const res = await fetch('/api/session-status');
        const data = await res.json();
        setAuthData({ authenticated: data.authenticated });
        localStorage.setItem('authenticated', JSON.stringify(data.authenticated));
      } catch (err) {
        setAuthData({ authenticated: false });
        localStorage.setItem('authenticated', 'false');
      }
    };
    syncSession();
  }, []);

  // 登录/登出主动更新状态
  const login = async (credentials) => {
    const res = await fetch('/api/login', { 
      method: 'POST', 
      body: JSON.stringify(credentials),
      headers: { 'Content-Type': 'application/json' }
    });
    if (res.ok) {
      setAuthData({ authenticated: true });
      localStorage.setItem('authenticated', 'true');
    }
  };

  const logout = async () => {
    await fetch('/api/logout');
    setAuthData({ authenticated: false });
    localStorage.setItem('authenticated', 'false');
  };

  return (
    <AuthContext.Provider value={{ authData, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

2. 全局拦截401错误：封装请求工具，统一处理会话失效场景

// 封装fetch，添加全局错误处理
const apiFetch = async (url, options = {}) => {
  const defaultOptions = {
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include' // 确保携带会话Cookie
  };
  const mergedOptions = { ...defaultOptions, ...options };

  try {
    const res = await fetch(url, mergedOptions);
    if (res.status === 401) {
      // 会话失效，强制更新前端状态并跳转
      const { setAuthData } = useAuth();
      setAuthData({ authenticated: false });
      localStorage.setItem('authenticated', 'false');
      window.location.href = '/login';
      throw new Error('会话已过期，请重新登录');
    }
    return res;
  } catch (err) {
    console.error('请求出错:', err);
    throw err;
  }
};

3. UI切换逻辑保持不变：依然用Context状态切换应用，但此时状态是经过后端校验的缓存

const { authenticated } = useAuth().authData;
return authenticated ? <AuthenticatedApp/> : <UnauthenticatedApp/>

方案优势 #

• 无重复请求：仅启动时发起一次校验，后续请求无额外开销
• 无需全局响应头处理：后端只在初始化接口返回状态，其他场景靠401错误统一同步
• 彻底防篡改：前端状态只是缓存，后端始终做真实权限校验，篡改localStorage只会导致UI临时异常，请求时会被401强制修正状态

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