如何在React中设置全局路由权限？

在React中设置全局路由权限，一种常见的做法是结合`react-router-dom`库和状态管理工具（如Redux、MobX等）。以下是大致步骤：

1. **创建权限状态管理**: 首先，你需要在应用的状态管理器（例如Redux Store）中创建一个表示用户权限的对象，如`userPermissions`，存储用户可以访问的路由或页面列表。

import { createSlice } from '@reduxjs/toolkit';

const permissionSlice = createSlice({
  name: 'permission',
  initialState: {},
  reducers: {
    setPermissions: (state, action) => { ... },
    // 其他用于更新权限的actions...
  }
});

export const { setPermissions } = permissionSlice.actions;
export default permissionSlice.reducer;

2. **拦截路由变化**: 在`react-router-dom`中，你可以使用`useSelector`或`useEffect`来获取当前用户的权限，并在`<Route>`组件或`withRouter`高阶组件中检查权限。

import { useSelector } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

function AuthenticatedRoute({ component: Component, ...rest }) {
  const permissions = useSelector(state => state.permission.userPermissions);
  
  return (
    <Route
      {...rest}
      render={(props) =>
        permissions.includes(props.match.path)
          ? <Component {...props} />
          : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
      }
    />
  );
}

3. **处理权限更新**: 当用户登录、登出或权限发生改变时，调用你的权限API并更新状态，然后通过`setPermissions` action触发更新。

// 例如，在登录成功后的回调中
handleLoginSuccess(user) {
  dispatch(permissionSlice.setPermissions(user.permissions));
}

4. **错误处理**: 对于未授权的页面访问，可以在客户端抛出友好的错误消息或跳转到适当的错误页面。

以上只是一个基本示例，实际应用中可能还需要考虑其他细节，比如错误处理、异步加载和缓存等问题。