标准答案
- 路由懒加载通常用 lazy、动态 import 或框架路由能力，把页面组件拆成独立 chunk。
- 权限控制要先区分登录态、角色权限、资源权限和按钮权限，不能只靠菜单是否展示。
- 常见做法是在路由配置里声明 meta 或 handle 信息，再用 RequireAuth、RequirePermission 这类包装组件判断是否允许渲染。
- 未登录时跳转登录页，权限不足时展示 403 或引导申请权限，不要让页面空白。
- 后端接口仍然必须做权限校验，前端路由权限只是体验层和入口控制。
题目解析
这道题的重点是把加载边界和权限边界分开。懒加载不等于权限控制，权限控制也不能只靠懒加载隐藏代码。
权限判断不要散落在每个页面里。集中到路由配置和权限组件中，后续新增页面时更容易保持一致。
如果权限依赖异步用户信息，要处理初始化 loading，否则刷新受保护路由时可能先误判再跳转。
代码示例
下面展示了用懒加载页面和权限包装组件组织受保护路由。
TSX
const OrderPage = lazy(() => import('./pages/OrderPage'))
function RequirePermission({
permission,
children
}: {
permission: string
children: ReactNode
}) {
const auth = useAuth()
if (auth.loading) {
return <span>加载中</span>
}
if (!auth.user) {
return <Navigate to="/login" replace />
}
if (!auth.permissions.includes(permission)) {
return <ForbiddenPage />
}
return children
}常见误区
- 只隐藏菜单，不拦截直接访问受保护路由。
- 前端通过权限路由控制后，后端接口就不再校验权限。
- 权限数据异步加载时没有 loading 态，刷新页面会误跳登录或 403。