React-Router 5.2.0私有路由登录后无法重定向到首页问题

现存问题 #

• 判断逻辑完全倒置：现有Privateroute组件在user.email为空（未登录）时渲染子内容，已登录时反而重定向到登录页，和权限拦截需求完全相反。
• 保护范围错误：仅将根路径的重定向规则包裹在私有路由中，真正需要权限控制的/admin后台路由未做任何拦截，未登录用户可直接访问。
• 上下文缺失：代码中引入了Redux的Provider但未包裹根组件，路由组件内调用useSelector时会因找不到Store上下文抛出错误。
• 冗余代码：App.js中引入的useDispatch、useSelector、login均未使用，属于无效导入。

修正代码 #

1. 重写私有路由组件 #

兼容React-Router的Route组件props规范，修正判断逻辑：

import React from 'react'
import { useSelector } from 'react-redux';
import { Redirect, Route } from 'react-router-dom';

const Privateroute = (props) => {
    const { component: Component, ...rest } = props;
    const user = useSelector((state) => state.user.value);
    return (
        <Route
            {...rest}
            render={(routeProps) => 
                user?.email ? <Component {...routeProps} /> : <Redirect to="/auth/login" />
            }
        />
    )
};

export default Privateroute;

2. 修正根组件路由配置 #

将Provider放到组件树最外层，调整路由规则的权限范围：

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import AdminLayout from "layouts/Admin.js";
import AuthLayout from "layouts/Auth.js";
import { store } from "./views/examples/redux/store";
import { Provider } from 'react-redux'
import Privateroute from "views/examples/Privateroute";

// 挂载根组件时包裹Redux上下文
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        {/* 公开路由：登录、注册页无需权限校验 */}
        <Route path="/auth" render={(props) => <AuthLayout {...props} />} />
        {/* 受保护路由：后台页必须登录才能访问 */}
        <Privateroute path="/admin" component={AdminLayout} />
        {/* 根路径重定向：根据登录状态跳转对应页面 */}
        <Route exact path="/" render={() => {
          const user = store.getState().user.value;
          return user?.email ? <Redirect to="/admin/index" /> : <Redirect to="/auth/login" />
        }} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

export default App;

效果说明 #

修正后逻辑符合预期：

• 未登录用户访问后台页、根路径时，自动跳转到登录页
• 已登录用户访问根路径、登录页时，自动跳转到后台首页
• 所有后台路由都被权限规则覆盖，不会出现越权访问

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