React中如何避免已登录用户手动修改URL跳转至登录页

一、阻止已登录用户进入登录页 #

要禁止已登录用户通过手动修改URL回到登录页，直接在Login组件里添加拦截逻辑即可：

1. 在Login.js中加入登录状态判断
   从Redux store中获取当前认证状态，只要用户已登录，组件渲染时直接跳回/home页面：

   import { useSelector } from 'react-redux';
   import { Navigate } from 'react-router-dom';
   
   function Login() {
     const { isAuthenticated } = useSelector(state => state.user); // 假设store中isAuthenticated字段标记登录状态
   
     // 已登录则跳转主页，用replace避免后退回到登录页
     if (isAuthenticated) {
       return <Navigate to="/home" replace />;
     }
   
     // 原有登录表单代码
     return (
       <div className="login-form">
         {/* 登录表单内容 */}
       </div>
     );
   }
   
   export default Login;
   

2. 路由配置保持原有逻辑
   登录页仍设为公开访问，靠组件内部判断拦截已登录用户，App.js路由配置无需额外修改：

   import { Routes, Route } from 'react-router-dom';
   import Login from './Login';
   import Home from './Home';
   import ProtectedRoute from './ProtectedRoute';
   
   function App() {
     return (
       <Routes>
         <Route path="/" element={<Login />} />
         <Route path="/home" element={
           <ProtectedRoute>
             <Home />
           </ProtectedRoute>
         } />
       </Routes>
     );
   }
   

二、认证状态持久化：必须用localStorage，同时解决null/undefined问题 #

页面刷新后Redux状态会重置，所以必须用localStorage存储认证信息（如token、用户数据），才能在页面加载时恢复登录状态。出现null/undefined问题，多是读取时未做兜底处理，按以下方式修复：

1. 登录成功时正确存储状态 #

在Login.js的登录请求回调中，将认证数据存入localStorage：

const handleLogin = async () => {
  try {
    const { data } = await userApi.login(credentials); // 调用UserApi登录接口
    // 注意对象类型数据要转成字符串存储
    localStorage.setItem('authToken', data.token);
    localStorage.setItem('userInfo', JSON.stringify(data.user));
    // 更新Redux状态
    dispatch(setUser(data.user));
    dispatch(setAuthenticated(true));
  } catch (err) {
    // 处理登录错误
  }
};

2. Redux初始化时读取localStorage并兜底 #

在User slice中，初始化state时优先读取localStorage，同时设置默认值避免null/undefined：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null,
  isAuthenticated: !!localStorage.getItem('authToken'), // 有token则标记为已登录
  token: localStorage.getItem('authToken') || null
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
      // 更新localStorage同步状态
      localStorage.setItem('userInfo', JSON.stringify(action.payload));
    },
    setAuthenticated: (state, action) => {
      state.isAuthenticated = action.payload;
    },
    logout: (state) => {
      // 登出时清空Redux和localStorage
      state.user = null;
      state.isAuthenticated = false;
      state.token = null;
      localStorage.removeItem('authToken');
      localStorage.removeItem('userInfo');
    }
  }
});

export const { setUser, setAuthenticated, logout } = userSlice.actions;
export default userSlice.reducer;

3. ProtectedRoute依赖Redux状态判断 #

不要直接读取localStorage，避免状态不一致，ProtectedRoute仍从Redux获取认证状态：

import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const { isAuthenticated } = useSelector(state => state.user);

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

  return children;
}

export default ProtectedRoute;

三、验证逻辑 #

1. 登录成功后手动修改URL为localhost:3000/，Login组件会检测到已登录状态，自动跳转回/home；
2. 刷新页面，Redux会从localStorage恢复登录状态，无需重新登录；
3. 登出后，localStorage和Redux状态同步清空，此时访问/home会被拦截跳回登录页。

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