ReactJS中如何阻止已认证用户返回Login登录路由

核心思路 #

你现有的PrivateRoute仅实现了「未登录用户拦截到登录页」的逻辑，要实现「已登录用户无法访问登录页」的需求，只需要新增一个反向鉴权的路由组件即可，完全复用你现有的useAuth鉴权逻辑，不需要修改原有PrivateRoute的代码：

• 新增PublicRoute组件，专门用于包裹登录、注册这类仅未登录用户可访问的路由
• 已登录用户访问PublicRoute包裹的路由时，自动重定向到首页/

代码实现 #

修改你现有的私有路由文件，新增PublicRoute组件并导出：

import React from 'react'
import { Redirect, Route } from 'react-router'
import { useAuth } from '../contexts/AuthContext'

// 原有私有路由：仅已登录用户可访问
export default function PrivateRoute({component: Component, ...rest}) {
    const{ currentUser } = useAuth()
    return (
        <Route
            {...rest}
            render={props =>{
               return  currentUser? <Component {...props} /> : <Redirect to="/login" />
            }}>
        </Route>
    )
}

// 新增公开路由：仅未登录用户可访问
export function PublicRoute({component: Component, ...rest}) {
    const{ currentUser } = useAuth()
    return (
        <Route
            {...rest}
            render={props =>{
               return  !currentUser? <Component {...props} /> : <Redirect to="/" />
            }}>
        </Route>
    )
}

路由配置使用 #

修改你的路由配置代码，把/login路由从普通Route替换为PublicRoute包裹即可：

import { BrowserRouter as Router, Switch } from 'react-router-dom'
import PrivateRoute, { PublicRoute } from './components/PrivateRoute'
import Dashboard from './pages/Dashboard'
import Login from './pages/Login'

function App() {
  return (
    <Router>
      <Switch>
        {/* 私有路由：仅登录后可访问首页 */}
        <PrivateRoute exact path="/" component={Dashboard} />
        {/* 公开路由：仅未登录可访问登录页 */}
        <PublicRoute exact path="/login" component={Login} />
        {/* 其他不需要鉴权的公共页面用普通Route即可 */}
      </Switch>
    </Router>
  )
}

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