Flutter校友门户：学生/校友身份的路由与权限控制实现

1. 注册页添加身份选择单选框 #

在你的注册页面State类中维护选中身份的状态变量，用RadioListTile实现单选组，集成到现有注册表单中：

class _RegisterPageState extends State<RegisterPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  String? _selectedRole; // 可选值: 'student' 或 'alumni'

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('注册')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 邮箱输入框
            TextField(
              controller: _emailController,
              decoration: const InputDecoration(labelText: '邮箱'),
              keyboardType: TextInputType.emailAddress,
            ),
            // 密码输入框
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(labelText: '密码'),
              obscureText: true,
            ),
            // 身份选择单选组
            const SizedBox(height: 16),
            const Text('选择身份:', style: TextStyle(fontSize: 16)),
            RadioListTile(
              title: const Text('学生'),
              value: 'student',
              groupValue: _selectedRole,
              onChanged: (value) => setState(() => _selectedRole = value as String),
            ),
            RadioListTile(
              title: const Text('校友'),
              value: 'alumni',
              groupValue: _selectedRole,
              onChanged: (value) => setState(() => _selectedRole = value as String),
            ),
            // 注册按钮
            ElevatedButton(
              onPressed: _register,
              child: const Text('注册'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 将身份信息与Firebase账号绑定存储 #

推荐用Firestore存储用户身份（比Auth自定义Claims更灵活，便于后续扩展用户信息），注册成功后将身份写入Firestore：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

void _register() async {
  if (_selectedRole == null) {
    // 提示用户必须选择身份
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请选择身份')),
    );
    return;
  }

  try {
    // 创建Firebase Auth账号
    final userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: _emailController.text.trim(),
      password: _passwordController.text.trim(),
    );
    final user = userCredential.user;
    if (user != null) {
      // 将身份写入Firestore的users集合
      await FirebaseFirestore.instance.collection('users').doc(user.uid).set({
        'uid': user.uid,
        'email': user.email,
        'role': _selectedRole,
        'createdAt': FieldValue.serverTimestamp(),
      });
      // 注册成功后跳转至对应身份页面
      _navigateBasedOnRole(_selectedRole!);
    }
  } on FirebaseAuthException catch (e) {
    // 处理注册错误
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(e.message ?? '注册失败')),
    );
  }
}

3. 身份跳转与全局权限控制 #

3.1 注册/登录后根据身份跳转 #

实现跳转逻辑，不同身份对应不同首页：

void _navigateBasedOnRole(String role) {
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => role == 'student' ? const StudentHomePage() : const AlumniHomePage(),
    ),
  );
}

3.2 全局访问身份信息 #

用Provider状态管理维护全局用户身份，方便各页面获取：

1. 创建用户状态类：

class UserRoleProvider extends ChangeNotifier {
  String? _role;

  String? get role => _role;

  // 从Firestore加载用户身份
  Future<void> loadUserRole() async {
    final user = FirebaseAuth.instance.currentUser;
    if (user != null) {
      final doc = await FirebaseFirestore.instance.collection('users').doc(user.uid).get();
      if (doc.exists) {
        _role = doc.data()?['role'];
        notifyListeners();
      }
    }
  }

  // 更新身份（如需修改）
  void updateRole(String newRole) {
    _role = newRole;
    notifyListeners();
  }
}

2. 在main.dart中初始化Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserRoleProvider(),
      child: const MyApp(),
    ),
  );
}

3. 在页面中获取身份并控制功能权限：

// 示例：学生首页根据身份显示专属功能
class StudentHomePage extends StatelessWidget {
  const StudentHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final userRole = Provider.of<UserRoleProvider>(context).role;
    return Scaffold(
      appBar: AppBar(title: const Text('学生首页')),
      body: Center(
        child: Column(
          children: [
            const Text('学生专属功能'),
            if (userRole == 'student') 
              ElevatedButton(
                onPressed: () => // 学生专属操作逻辑,
                child: const Text('查看课程资源'),
              ),
            // 所有用户可访问的公共功能
            ElevatedButton(
              onPressed: () => // 公共操作逻辑,
              child: const Text('查看校友列表'),
            ),
          ],
        ),
      ),
    );
  }
}

3.3 路由守卫（可选） #

防止未授权用户访问特定页面，比如限制学生进入校友专属页面：

// 路由守卫组件
class RoleGuard extends StatelessWidget {
  final String requiredRole;
  final Widget child;

  const RoleGuard({super.key, required this.requiredRole, required this.child});

  @override
  Widget build(BuildContext context) {
    final userRole = Provider.of<UserRoleProvider>(context).role;
    if (userRole == requiredRole) {
      return child;
    } else {
      return const Scaffold(
        body: Center(child: Text('无访问权限')),
      );
    }
  }
}

// 使用方式
MaterialPageRoute(
  builder: (context) => RoleGuard(
    requiredRole: 'alumni',
    child: const AlumniHomePage(),
  ),
);

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