如何在ComponentWillMount中实现登录权限校验？

嘿，看起来你已经搭好了基础的授权组件架子，但如果想让所有需要登录权限的页面都能统一复用校验逻辑，不用每个页面都手动去继承BaseAuthorizedComponent的话，这里有几个更优雅的方案，结合React和Redux生态来实现，帮你减少重复代码：

方案1：用高阶组件（HOC）封装登录校验逻辑 #

把登录校验的核心逻辑抽成一个高阶组件，任何需要登录保护的页面组件，直接用这个HOC包裹就行，不用重复写继承逻辑。

实现步骤： #

1. 先编写这个高阶组件：

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom'; // 假设你用react-router做路由跳转

const withAuth = (WrappedComponent) => {
  const AuthProtectedComponent = (props) => {
    const { isLoggedIn } = useSelector(state => state.user); // 从Redux取出登录状态字段
    const navigate = useNavigate();

    useEffect(() => {
      // 组件挂载时立刻校验登录状态
      if (!isLoggedIn) {
        navigate('/login'); // 未登录直接跳转到登录页
      }
    }, [isLoggedIn, navigate]);

    // 已登录才渲染原页面组件，未登录时返回null避免渲染无效内容
    return isLoggedIn ? <WrappedComponent {...props} /> : null;
  };

  return AuthProtectedComponent;
};

export default withAuth;

2. 在需要登录的页面组件中使用：

import withAuth from './withAuth';

const HomePage = (props) => {
  // 这里写你的页面内容，只有已登录用户能看到
  return <div>首页内容（已登录可见）</div>;
};

// 用withAuth包裹组件，直接获得登录保护能力
export default withAuth(HomePage);

方案2：React Router路由守卫（全局统一拦截） #

如果你的项目用React Router，推荐直接在路由配置层面做全局拦截，这种方式更省心，不用每个组件单独处理。

实现步骤： #

1. 编写路由守卫组件：

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

const ProtectedRoute = () => {
  const { isLoggedIn } = useSelector(state => state.user);
  
  // 已登录则渲染子路由内容，未登录直接重定向到登录页
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" replace />;
};

export default ProtectedRoute;

2. 在路由配置中使用：

import { Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import HomePage from './HomePage';
import DashboardPage from './DashboardPage';
import LoginPage from './LoginPage';

function App() {
  return (
    <Routes>
      {/* 公开可访问的路由 */}
      <Route path="/login" element={<LoginPage />} />
      
      {/* 所有需要登录的页面都放在这个受保护的路由组里 */}
      <Route element={<ProtectedRoute />}>
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard" element={<DashboardPage />} />
        {/* 新增需要登录的页面时，直接在这里加路由就行 */}
      </Route>
    </Routes>
  );
}

export default App;

方案3：优化现有BaseAuthorizedComponent（保留继承方式） #

如果你更倾向于保留组件继承的模式，可以优化BaseAuthorizedComponent的逻辑，确保校验在组件挂载前触发：

类组件版本优化： #

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

class BaseAuthorizedComponent extends Component {
  componentDidMount() {
    const { user, history } = this.props;
    if (!user.isLoggedIn) {
      history.push('/login');
    }
  }

  componentDidUpdate(prevProps) {
    // 如果登录状态发生变化（比如用户登出），再次校验跳转
    if (prevProps.user.isLoggedIn !== this.props.user.isLoggedIn && !this.props.user.isLoggedIn) {
      this.props.history.push('/login');
    }
  }

  render() {
    // 未登录时不渲染子组件内容
    if (!this.props.user.isLoggedIn) {
      return null;
    }
    return this.props.children || null;
  }
}

const mapStateToProps = (state) => ({
  user: state.user
});

// 用withRouter注入路由跳转方法，connect关联Redux状态
export default withRouter(connect(mapStateToProps)(BaseAuthorizedComponent));

然后你的HomePageHandler可以继续继承使用：

import BaseAuthorizedComponent from './BaseAuthorizedComponent';

class HomePageHandler extends BaseAuthorizedComponent {
  render() {
    // 这里只渲染已登录用户能看到的内容
    return <div>首页内容</div>;
  }
}

export default HomePageHandler;

额外提醒： #

• 确保Redux中user.isLoggedIn字段能实时同步用户登录/登出的状态，比如登录成功后要更新该字段，登出时也要重置。
• 类组件记得用withRouter获取路由跳转方法，函数组件直接用useNavigate钩子即可。
• 路由守卫方案更适合中大型项目，全局管理更方便，新增页面时不用修改组件，只需要在路由配置里加就行。

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