面试题：React路由守卫中如何实现基于角色的权限控制？

实现方案

定义角色和路由权限：
- 首先在应用中定义不同角色及其对应的路由权限。例如，创建一个对象来存储这些信息：
```
const rolePermissions = {
    admin: ['/', '/admin/dashboard', '/user/profile', '/products/list'],
    regularUser: ['/', '/user/profile']
};
```

创建路由守卫：

在React Router中，可以使用useEffect钩子和history对象来实现路由守卫。通常在应用的顶层组件（如App.js）中进行设置。
引入必要的依赖：

import { useEffect } from'react';
import { useHistory } from'react-router-dom';

获取当前用户角色（假设通过localStorage或上下文获取）：

const currentRole = localStorage.getItem('role');// 示例获取方式

创建路由守卫逻辑：

const history = useHistory();
useEffect(() => {
    const allowedRoutes = rolePermissions[currentRole] || [];
    const currentPath = history.location.pathname;
    if (!allowedRoutes.includes(currentPath)) {
        history.push('/');// 跳转到允许的首页
    }
}, [currentRole, history]);

在路由配置中应用：

在定义路由时，确保所有路由都经过这个守卫逻辑的检查。例如，使用BrowserRouter和Routes（在React Router v6中）来配置路由：

import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import AdminDashboard from './components/AdminDashboard';
import UserProfile from './components/UserProfile';
import ProductsList from './components/ProductsList';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/admin/dashboard" element={<AdminDashboard />} />
                <Route path="/user/profile" element={<UserProfile />} />
                <Route path="/products/list" element={<ProductsList />} />
            </Routes>
        </Router>
    );
}

关键技术点

React Router：
- 用于处理应用中的路由，通过BrowserRouter、Routes、Route等组件定义和管理路由。不同版本的React Router使用方式略有不同，如v6中引入了新的语法和特性。
useEffect钩子：
- 用于在组件挂载和更新时执行副作用操作。在路由守卫中，利用useEffect来监听用户角色和路由变化，从而执行权限检查逻辑。
history对象：
- 提供了操作浏览器历史记录的方法，如push方法用于导航到新的路由。通过useHistory钩子可以在函数组件中获取history对象，实现路由跳转功能。
角色权限管理：
- 合理定义和存储角色与路由权限的映射关系是实现路由守卫的基础。可以根据实际应用需求，选择合适的数据结构（如对象、数组等）来存储和管理这些权限信息。

星途面试题库

面试题：React路由守卫中如何实现基于角色的权限控制？

知识考点

面试题答案

实现方案

关键技术点