React项目如何强制管理员访问其他组件前先登录 解决isAdmin报错

报错原因 #

你的Redux存储中user.currentUser初始值为null，未登录状态下直接访问null.isAdmin就会触发这个类型错误。

可行解决方法 #

方法1：可选链安全取值（最快修复）

直接在useSelector的取值逻辑中加入可选链，避免空值报错：

const admin = useSelector((state) => state.user.currentUser?.isAdmin)

可选链在currentUser为null/undefined时会直接返回undefined，属于假值，会自动渲染Login组件，完全符合你的业务需求。
如果需要兼容不支持可选链的环境，改用逻辑与判断即可：

const admin = useSelector((state) => state.user && state.user.currentUser && state.user.currentUser.isAdmin)

方法2：修改Redux初始值

在你定义user模块的reducer时，给currentUser设置默认值，避免出现null的情况：

// user reducer示例
const initialState = {
  currentUser: {
    isAdmin: false
  },
  // 其他user相关state字段
}

初始状态下currentUser永远是对象，访问isAdmin就不会触发空值报错。

方法3：封装管理员路由守卫（扩展性更强）

如果后续需要加更多管理员权限路由，单独封装私有路由组件更便于维护：

// 新建AdminRoute.js
import { Route, Redirect } from 'react-router-dom'
import { useSelector } from 'react-redux'

export default function AdminRoute(props) {
  const isAdmin = useSelector((state) => state.user.currentUser?.isAdmin)
  return isAdmin ? <Route {...props} /> : <Redirect to="/login" />
}

修改App组件的路由逻辑：

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" exact component={Login}/>
        <AdminRoute path="/" exact component={Home}/>
        {/* 后续其他管理员路由都用AdminRoute包裹即可
        <AdminRoute path="/user-list" exact component={UserList}/>
        <AdminRoute path="/product-list" exact component={ProductList}/>
        */}
      </Switch>
    </Router>
  )
}

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