Flutter Web(Firebase托管)角色权限页面安全方案及报错解决

先解决build中跳转触发的错误 #

直接在build方法里执行导航会触发setState() or markNeedsBuild()错误，因为此时Widget还在构建流程中。可以改用WidgetsBinding.instance.addPostFrameCallback，在当前帧构建完成后再执行跳转逻辑：

class AdminPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 从Firebase Auth获取当前用户角色
    final userRole = FirebaseAuth.instance.currentUser?.claims?['role'];

    // 在build完成后执行权限校验
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (userRole != 'admin1') {
        Navigator.pushReplacementNamed(context, '/home');
      }
    });

    // 先返回占位Widget，避免校验过程中界面空白
    return Scaffold(
      body: userRole == 'admin1' 
          ? AdminContent() // 管理员页面实际内容
          : Center(child: CircularProgressIndicator()),
    );
  }
}

全局路由守卫（更优方案） #

单页面校验容易遗漏，建议用全局路由守卫统一拦截权限，避免每个页面重复写校验逻辑：

原生Navigator实现

在MaterialApp的onGenerateRoute中添加全局校验：

MaterialApp(
  onGenerateRoute: (settings) {
    final userRole = FirebaseAuth.instance.currentUser?.claims?['role'];

    // 拦截管理员页面路由
    if (settings.name == '/admin') {
      if (userRole != 'admin1') {
        // 无权限直接跳转到首页
        return MaterialPageRoute(builder: (_) => HomePage());
      }
      // 有权限正常进入
      return MaterialPageRoute(builder: (_) => AdminPage());
    }

    // 其他路由正常处理
    switch (settings.name) {
      case '/home':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/login':
        return MaterialPageRoute(builder: (_) => LoginPage());
      default:
        return MaterialPageRoute(builder: (_) => NotFoundPage());
    }
  },
);

结合Firebase Auth状态监听

如果角色是从Firebase Auth自定义Claims获取的，建议用StreamBuilder监听用户登录状态，实时校验权限：

class AuthWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }

        final user = snapshot.data;
        if (user == null) {
          return LoginPage();
        }

        // 获取用户角色Claims
        return FutureBuilder<Map<String, dynamic>?>(
          future: user.getIdTokenResult(),
          builder: (context, tokenSnapshot) {
            if (!tokenSnapshot.hasData) {
              return Center(child: CircularProgressIndicator());
            }
            final role = tokenSnapshot.data?.claims?['role'];
            
            // 根据角色渲染对应页面
            return role == 'admin1' ? AdminPage() : HomePage();
          },
        );
      },
    );
  }
}

后端安全加固（不可省略） #

前端校验仅做用户体验优化，必须配合Firebase安全规则，防止用户通过修改前端代码绕过校验。比如在Firestore中设置规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /admin_data/{document} {
      allow read, write: if request.auth != null && request.auth.token.role == 'admin1';
    }
  }
}

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