React应用如何基于角色跳转路由及通过URL直接访问组件

1. 登录后按角色跳转对应页面的实现方案 #

推荐用React Router v6版本实现路由跳转，操作步骤如下：

• 安装依赖：执行命令 npm install react-router-dom
• 全局包裹路由：在index.js中给App组件套上BrowserRouter标签

// index.js 示例代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

• 登录逻辑中按角色跳转：在登录方法里调用useNavigate实现跳转

// App.js 登录逻辑示例
import { useNavigate } from 'react-router-dom'

function App() {
  const navigate = useNavigate()
  // 登录提交触发方法
  const handleLoginSubmit = async (formData) => {
    // 调用后端登录接口，拿到返回的用户角色字段，比如返回的role为admin或client
    const loginRes = await request.post('/api/login', formData)
    const { role } = loginRes.data
    // 按角色跳转到对应页面
    if(role === 'admin') {
      navigate('/admin')
    } else if(role === 'client') {
      navigate('/client')
    }
  }

  // 其余登录表单渲染逻辑
  return (
    // 登录表单代码
  )
}

2. 路径直接访问&权限控制方案 #

默认未做拦截的情况下，你完全可以配置localhost:3000/admin直接访问Admin组件，不需要走登录流程，如果需要限制登录才能访问，再加路由守卫即可。

2.1 实现直接通过URL访问对应组件 #

在App.js中配置路由映射规则即可：

// App.js 路由配置示例
import { Routes, Route } from 'react-router-dom'
import Admin from './Admin'
import Client from './Client'
// 登录功能可以直接写在根路由对应的组件里，也可以单独抽成Login组件
import Login from './Login'

function App() {
  return (
    <Routes>
      {/* 根路径显示登录页 */}
      <Route path="/" element={<Login />} />
      {/* 配置admin、client路径和组件的映射 */}
      <Route path="/admin" element={<Admin />} />
      <Route path="/client" element={<Client />} />
    </Routes>
  )
}

配置完成后直接在浏览器输入localhost:3000/admin就可以直接打开Admin组件，不需要经过登录流程。

2.2 （可选）限制未登录用户直接访问后台 #

如果你不允许未登录用户直接访问admin/client页面，可以封装私有路由做权限校验：

// 新建PrivateRoute.js 私有路由组件
import { Navigate, Outlet } from 'react-router-dom'

const PrivateRoute = ({ requiredRole }) => {
  // 登录态可以存在localStorage或者全局状态管理工具（Redux/Zustand）中
  const hasLogin = !!localStorage.getItem('loginToken')
  const userRole = localStorage.getItem('userRole')

  // 未登录直接跳回登录页
  if(!hasLogin) return <Navigate to="/" replace />
  // 角色不匹配也跳回登录页
  if(requiredRole && userRole !== requiredRole) return <Navigate to="/" replace />
  // 校验通过渲染对应页面
  return <Outlet />
}
export default PrivateRoute

然后调整App.js的路由配置，把需要权限的页面套在私有路由下：

// App.js 调整后的路由配置
import PrivateRoute from './PrivateRoute'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      {/* admin页面仅admin角色可访问 */}
      <Route element={<PrivateRoute requiredRole="admin" />}>
        <Route path="/admin" element={<Admin />} />
      </Route>
      {/* client页面仅client角色可访问 */}
      <Route element={<PrivateRoute requiredRole="client" />}>
        <Route path="/client" element={<Client />} />
      </Route>
    </Routes>
  )
}

加了私有路由后，未登录用户直接输入localhost:3000/admin会自动跳回登录页，无法绕过登录访问后台。

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