面试题：React路由结合Context实现权限控制

1. Context状态管理

创建Context：在React中，首先创建一个UserContext用于存储用户角色信息。

import React from 'react';

const UserContext = React.createContext();

export default UserContext;

提供Context：在应用的顶层组件（例如App组件）中，通过UserContext.Provider将用户角色信息传递下去。假设从后端获取到用户角色信息后存储在userRole变量中。

import React from'react';
import UserContext from './UserContext';

function App() {
    const userRole = '普通用户';// 这里假设从后端获取到的用户角色
    return (
        <UserContext.Provider value={{ userRole }}>
            {/* 应用的其他部分 */}
        </UserContext.Provider>
    );
}

export default App;

消费Context：在需要判断用户角色的组件中，可以使用useContext钩子来获取用户角色信息。

import React, { useContext } from'react';
import UserContext from './UserContext';

function SomeComponent() {
    const { userRole } = useContext(UserContext);
    return (
        <div>
            当前用户角色: {userRole}
        </div>
    );
}

export default SomeComponent;

2. 路由守卫

使用高阶组件（HOC）实现路由守卫：创建一个高阶组件，用于检查用户角色是否有权限访问特定路由。

import React from'react';
import { Navigate } from'react-router-dom';
import UserContext from './UserContext';

const withAuth = (roleNeeded) => {
    return (WrappedComponent) => {
        return (props) => {
            const { userRole } = useContext(UserContext);
            if (userRole === roleNeeded) {
                return <WrappedComponent {...props} />;
            } else {
                return <Navigate to="/无权限页面路径" />;
            }
        };
    };
};

export default withAuth;

在路由中应用路由守卫：假设使用react-router-dom进行路由配置。

import React from'react';
import { Routes, Route } from'react-router-dom';
import withAuth from './withAuth';
import AdminPage from './AdminPage';
import NormalUserPage from './NormalUserPage';

function AppRoutes() {
    return (
        <Routes>
            <Route path="/admin" element={withAuth('管理员')(AdminPage)} />
            <Route path="/user" element={<NormalUserPage />} />
        </Routes>
    );
}

export default AppRoutes;

3. 组件渲染逻辑

普通组件渲染：普通用户组件（例如NormalUserPage）的渲染逻辑只需要处理普通用户的业务逻辑即可。

import React from'react';

function NormalUserPage() {
    return (
        <div>
            这是普通用户页面
        </div>
    );
}

export default NormalUserPage;

管理员组件渲染：管理员组件（例如AdminPage）同样处理管理员相关业务逻辑，但只有在用户角色为管理员时才会渲染。

import React from'react';

function AdminPage() {
    return (
        <div>
            这是管理员页面
        </div>
    );
}

export default AdminPage;

星途面试题库

面试题：React路由结合Context实现权限控制

知识考点

面试题答案

1. Context状态管理

2. 路由守卫

3. 组件渲染逻辑