React前端部署新版本时如何强制已登录用户登出？

因为后端无法主动触发登出，完全可以通过前端逻辑实现版本检测并强制登出，核心思路是对比当前应用版本与用户本地存储的版本，不一致则执行登出流程。

具体实现步骤 #

1. 注入应用版本号 #

在构建时将项目的版本号（取自package.json的version字段）注入到应用中，确保打包后的代码能获取到当前版本。

Vite配置示例

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import pkg from './package.json';

export default defineConfig({
  plugins: [react()],
  define: {
    __APP_VERSION__: JSON.stringify(pkg.version),
  },
});

Webpack配置示例

// webpack.config.js
const webpack = require('webpack');
const pkg = require('./package.json');

module.exports = {
  // 其他配置项
  plugins: [
    new webpack.DefinePlugin({
      __APP_VERSION__: JSON.stringify(pkg.version),
    }),
  ],
};

2. 版本对比与登出逻辑 #

在应用根组件的初始化阶段，对比本地存储的版本与当前版本，不一致则触发登出，同时监听其他标签页的存储变化，确保多标签页同步登出。

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { logout } from './redux/authSlice';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const storedVersion = localStorage.getItem('app_version');
    const currentVersion = __APP_VERSION__;

    // 版本不一致，执行强制登出
    if (storedVersion && storedVersion !== currentVersion) {
      dispatch(logout());
      localStorage.removeItem('jwt_token');
      localStorage.removeItem('app_version');
      window.location.href = '/login';
    } 
    // 首次访问，存储当前版本
    else if (!storedVersion) {
      localStorage.setItem('app_version', currentVersion);
    }

    // 监听其他标签页的版本变更，同步登出
    const handleStorageChange = (e) => {
      if (e.key === 'app_version' && e.newValue !== currentVersion) {
        dispatch(logout());
        window.location.href = '/login';
      }
    };
    window.addEventListener('storage', handleStorageChange);

    return () => window.removeEventListener('storage', handleStorageChange);
  }, [dispatch]);

  return (
    // 应用内容渲染
  );
}

export default App;

3. Redux登出动作实现 #

在Redux的auth切片中定义登出动作，清空登录状态：

// redux/authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isLoggedIn: false,
    token: null,
    userInfo: null,
  },
  reducers: {
    logout: (state) => {
      state.isLoggedIn = false;
      state.token = null;
      state.userInfo = null;
    },
    // 其他登录/更新状态的动作
  },
});

export const { logout } = authSlice.actions;
export default authSlice.reducer;

关键注意事项 #

• 静态资源哈希：确保构建工具（Vite/Webpack）给打包后的静态文件添加哈希后缀，避免浏览器缓存旧版本代码，保证新版本的版本对比逻辑能正常执行。
• 版本号更新：每次部署新版本时，记得更新package.json中的version字段（比如从1.0.0改为1.0.1），否则版本对比会失效。
• 存储选择：这里用localStorage存储版本号，也可以用sessionStorage，后者会在会话结束后自动清除，适合不需要跨会话保留版本记录的场景。

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