面试题：React多页应用路由管理中的导航守卫与权限控制设计

创建权限验证函数：

首先，定义一个函数，用于验证用户是否具有访问特定页面的权限。假设我们有一个hasPermission函数，它接受用户角色和目标页面所需权限作为参数。

const hasPermission = (userRole, requiredPermission) => {
    // 这里可以根据实际的权限逻辑进行判断，例如：
    if (userRole === 'admin' && requiredPermission === 'admin - only - page') {
        return true;
    }
    return false;
};

使用React Router的导航守卫：

React Router提供了useEffect钩子和history对象来实现导航守卫。在需要权限控制的页面组件中使用如下代码：

import React, { useEffect } from'react';
import { useHistory } from'react - router - dom';
import { getUserRole } from './userService';// 假设此函数用于获取当前用户角色

const ProtectedPage = () => {
    const history = useHistory();
    const userRole = getUserRole();
    const requiredPermission = 'admin - only - page';// 此页面所需的权限

    useEffect(() => {
        if (!hasPermission(userRole, requiredPermission)) {
            history.push('/no - permission');// 重定向到权限不足页面
        }
    }, [userRole, history, requiredPermission]);

    return (
        <div>
            <h1>这是需要权限的页面</h1>
        </div>
    );
};

export default ProtectedPage;

处理权限不足时的页面重定向和提示：

创建一个NoPermission页面组件，用于展示权限不足的提示信息。

const NoPermission = () => {
    return (
        <div>
            <h1>权限不足，您无权访问此页面</h1>
        </div>
    );
};

在App.js中配置路由，将权限不足页面的路由添加进去。

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
import ProtectedPage from './ProtectedPage';
import NoPermission from './NoPermission';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/protected" element={<ProtectedPage />} />
                <Route path="/no - permission" element={<NoPermission />} />
            </Routes>
        </Router>
    );
};

export default App;

在应用性能和安全性之间达到平衡：

性能方面：

懒加载：对于大型应用，使用React Router的懒加载功能，延迟加载需要权限控制的页面组件，避免在应用启动时加载所有组件，提升初始加载性能。例如：

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/protected" element={React.lazy(() => import('./ProtectedPage'))} />
                <Route path="/no - permission" element={<NoPermission />} />
            </Routes>
        </Router>
    );
};

缓存权限验证结果：如果用户角色和权限在短时间内不会改变，可以缓存hasPermission函数的验证结果，避免每次路由跳转都重新计算。可以使用一个简单的缓存对象来实现：

const permissionCache = {};
const hasPermission = (userRole, requiredPermission) => {
    const cacheKey = `${userRole}-${requiredPermission}`;
    if (permissionCache[cacheKey]) {
        return permissionCache[cacheKey];
    }
    // 实际权限判断逻辑
    const result = userRole === 'admin' && requiredPermission === 'admin - only - page';
    permissionCache[cacheKey] = result;
    return result;
};

安全性方面：
- 服务端验证：虽然前端进行了权限验证，但不能完全信任前端，在服务端也需要对请求进行权限验证，确保只有有权限的用户能够访问敏感资源。
- 防止URL篡改：可以在路由跳转时，对目标URL进行合法性检查，防止用户通过手动修改URL来访问无权限页面。例如，可以维护一个合法的路由列表，在导航守卫中检查目标URL是否在合法列表内。
```
const validRoutes = ['/protected', '/home', '/about'];
const hasPermission = (userRole, requiredPermission, targetUrl) => {
    if (!validRoutes.includes(targetUrl)) {
        return false;
    }
    // 实际权限判断逻辑
    return userRole === 'admin' && requiredPermission === 'admin - only - page';
};
```

星途面试题库

面试题：React多页应用路由管理中的导航守卫与权限控制设计

知识考点

面试题答案