如何利用Redux状态变量实现用户认证及解决页面刷新跳转问题

一、用Redux状态变量判断用户登录状态 #

首先，你应该在Redux的auth模块（或对应状态切片）里维护一个专门的登录状态标识，比如isLoggedIn（布尔值），或者通过user对象是否存在来判断——这比用authError靠谱多了，因为authError只是用来存储登录错误信息的，它为空不代表用户已经登录。

1. 定义Redux状态与Reducer

在你的auth reducer里初始化并更新登录状态，同时加入持久化逻辑解决刷新丢失问题：

// authReducer.js
const initialState = {
  isLoggedIn: false,
  user: null, // 存储登录后的用户信息
  authError: ""
};

// 从本地存储恢复状态（解决刷新丢失问题的关键）
const savedUser = localStorage.getItem("user");
if (savedUser) {
  initialState.user = JSON.parse(savedUser);
  initialState.isLoggedIn = true;
}

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case "LOGIN_SUCCESS":
      // 登录成功时更新状态，并把用户信息存到localStorage
      localStorage.setItem("user", JSON.stringify(action.payload));
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload,
        authError: null
      };
    case "LOGOUT":
      // 登出时清除本地存储和状态
      localStorage.removeItem("user");
      return {
        ...state,
        isLoggedIn: false,
        user: null,
        authError: ""
      };
    case "LOGIN_FAILURE":
      return {
        ...state,
        authError: action.payload,
        isLoggedIn: false
      };
    default:
      return state;
  }
}

2. 在组件中获取登录状态判断

在需要判断登录的组件里，用useSelector（函数组件）或者connect（类组件）获取Redux状态：

import { useSelector } from "react-redux";
import { Redirect } from "react-router-dom";

const MyProfile = () => {
  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
  
  // 如果未登录，跳转到登录页
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  return <div>你的个人页面内容</div>;
};

二、解决页面刷新自动跳登录页的问题 #

你遇到的刷新跳转问题，本质是Redux状态存在内存中，页面刷新后状态会重置。解决办法是把登录状态持久化到本地存储（localStorage/sessionStorage），上面的reducer代码已经包含了这部分逻辑：登录成功时把用户信息存到localStorage，初始化reducer时从localStorage读取并恢复状态。

三、优化路由：使用私有路由组件 #

为了避免在每个需要登录的页面重复写判断逻辑，你可以封装一个PrivateRoute组件，用来保护需要登录才能访问的路由：

// PrivateRoute.js
import { Route, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);

  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

export default PrivateRoute;

然后修改你的路由配置，把需要登录的页面替换成PrivateRoute：

return (
  <div>
    <Header />
    <Router history={history}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/contactus" component={ContactUs} />
        <Route path="/jobsnearyou" component={JobsNearYou} />
        {/* 需要登录的页面用PrivateRoute */}
        <PrivateRoute path="/CandidateChat" component={CandidateChat} />
        <PrivateRoute path="/myprofile" component={MyProfile} />
        <PrivateRoute path="/candidateprofile" component={CandidateProfile} />
        <PrivateRoute path="/employerprofile" component={EmployerProfile} />
        {/* 登录页不需要保护 */}
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
    <Footer />
  </div>
);

四、替换当前的authError判断逻辑 #

你之前用if(authError === "") return <Redirect to='/login/' />的逻辑是不合理的——authError为空可能只是没有登录错误，但不代表用户已经登录。建议完全替换成上面的isLoggedIn判断逻辑，这样更准确可靠。

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