Flutter 中的路由守卫：实现权限验证

Flutter 中的路由守卫：实现权限验证

5 回复

在Flutter中，可通过命名路由和Middleware模式自定义路由守卫进行权限验证。

更多关于Flutter 中的路由守卫：实现权限验证的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 onGenerateRoute 或 Navigator.pushNamed 时，可以在路由跳转前进行权限验证。通过 RouteSettings 和 Route 对象，判断用户权限并决定是否允许跳转。

在 Flutter 中，可以通过路由守卫实现权限验证。使用 MaterialApp 的 onGenerateRoute 属性，自定义路由逻辑。在导航前，检查用户权限，若未授权则重定向到登录页或提示页，若已授权则继续导航。示例代码如下：

onGenerateRoute: (settings) {
  if (requiresAuth(settings.name) && !isLoggedIn) {
    return MaterialPageRoute(builder: (_) => LoginPage());
  }
  return MaterialPageRoute(
    builder: (_) => routeMap[settings.name]!(),
  );
},

requiresAuth 判断路由是否需要权限，isLoggedIn 检查用户登录状态。

在 Flutter 中，可使用 Navigator 和 RouteObserver 实现路由守卫进行权限验证。

在 Flutter 中，路由守卫通常用于在导航到某个页面之前执行一些逻辑，例如用户权限验证。你可以通过 Navigator 和 onGenerateRoute 来实现路由守卫。以下是一个简单的示例，展示如何在 Flutter 中实现权限验证的路由守卫。

1. 创建一个简单的权限验证服务

首先，创建一个简单的服务来模拟权限验证。

class AuthService {
  bool isLoggedIn = false;

  Future<bool> checkLoginStatus() async {
    // 模拟异步检查登录状态
    await Future.delayed(Duration(seconds: 1));
    return isLoggedIn;
  }
}

2. 在 MaterialApp 中使用 onGenerateRoute

在 MaterialApp 中使用 onGenerateRoute 来拦截路由导航，并在导航之前执行权限验证。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final AuthService authService = AuthService();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        if (settings.name == '/protected') {
          return MaterialPageRoute(
            builder: (context) {
              return FutureBuilder<bool>(
                future: authService.checkLoginStatus(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return CircularProgressIndicator();
                  } else if (snapshot.hasData && snapshot.data!) {
                    return ProtectedPage();
                  } else {
                    return LoginPage();
                  }
                },
              );
            },
          );
        } else {
          return MaterialPageRoute(
            builder: (context) => HomePage(),
          );
        }
      },
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/login': (context) => LoginPage(),
        '/protected': (context) => ProtectedPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/protected');
          },
          child: Text('Go to Protected Page'),
        ),
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 模拟登录成功
            AuthService().isLoggedIn = true;
            Navigator.pop(context);
          },
          child: Text('Login'),
        ),
      ),
    );
  }
}

class ProtectedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Protected Page')),
      body: Center(
        child: Text('This is a protected page'),
      ),
    );
  }
}

3. 解释

  • AuthService 是一个简单的服务，用于模拟权限验证。
  • onGenerateRoute 用于拦截路由导航，并在导航到 /protected 路径时检查用户是否已登录。
  • 如果用户未登录，则导航到登录页面；如果已登录，则导航到受保护的页面。

通过这种方式，你可以轻松地在 Flutter 中实现路由守卫和权限验证。

回到顶部