如何在Flutter Web中用go_router实现403错误且不跳转至禁页？

当然可行，go_router提供了灵活的路由拦截与错误处理机制，完全可以在不修改当前URL的前提下展示403权限禁止页面。以下是具体实现方案：

方案一：使用RouteGuard结合错误捕获（推荐，适合全局权限控制） #

1. 定义自定义403异常 #

class ForbiddenException implements Exception {}

2. 实现权限守卫 #

创建路由守卫类，在其中完成权限校验逻辑，无权限时抛出403异常：

class AuthPermissionGuard extends RouteGuard {
  @override
  Future<void> check(BuildContext context, GoRouterState state) async {
    // 替换为你的实际权限校验逻辑，比如从状态管理/API获取用户权限
    final bool hasAccess = await verifyUserAccess(state.location);
    
    if (!hasAccess) {
      throw ForbiddenException();
    }
  }
}

3. 配置GoRouter并处理错误 #

在路由配置中绑定守卫，同时通过errorBuilder捕获403异常并渲染对应页面：

final GoRouter appRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/dashboard',
      builder: (context, state) => const DashboardPage(),
      guards: [AuthPermissionGuard()], // 为需要权限的路由绑定守卫
    ),
    GoRoute(
      path: '/admin',
      builder: (context, state) => const AdminPanelPage(),
      guards: [AuthPermissionGuard()],
    ),
    // 其他公开路由...
  ],
  errorBuilder: (context, state) {
    // 捕获403异常，渲染禁止访问页面
    if (state.error is ForbiddenException) {
      return const ForbiddenAccessPage();
    }
    // 处理其他路由错误（如404）
    return const NotFoundPage();
  },
);

方案二：单个路由内直接校验（适合简单场景） #

如果仅需对个别路由做权限控制，可直接在路由的builder方法中校验权限，返回对应页面：

GoRoute(
  path: '/restricted',
  builder: (context, state) {
    // 同步权限校验逻辑
    final bool hasPermission = checkUserPermission();
    
    if (!hasPermission) {
      return const ForbiddenAccessPage();
    }
    return const RestrictedContentPage();
  },
),

效果说明 #

两种方案都会保持当前URL不变，仅替换页面渲染内容，不会触发浏览器跳转或历史记录变更，完全满足你“停留在当前被禁止访问页面”的需求。

内容的提问来源于stack exchange，提问作者BambinoUA