如果未通过身份验证，Flutter Web 重定向用户

Question

我有一个带有命名路由的 GetMaterialApp，用于 Flutter web 中的仪表板项目。但是，我正在努力检查用户是否经过身份验证并根据身份验证状态重定向用户。这是我的应用代码：

GetMaterialApp(
      initialBinding: InitialBinding(),
      debugShowCheckedModeBanner: false,
      theme: CustomTheme().getLightTheme,
      themeMode: ThemeMode.light,
      title: "----------",
      initialRoute: "/login",
      unknownRoute: GetPage(name: "/notfound", page: () => NotFoundPage()),
      getPages: [
        GetPage(name: "/login", page: () => Root()),
        GetPage(name: "/dashboard", page: () => Dashboard()),
      ],
    ),

我正在使用 GetX 来处理身份验证状态。因此，我可以访问整个 Web 应用程序的身份验证状态。 Root 小部件由一个简单的 Obx 组成，用于检查身份验证状态并将用户发送到仪表板：

return Obx(() => (Get.find<AuthController>().loggedIn) ? Dashboard() : LoginScreen());

遗憾的是，这并没有起到作用，因为 url 没有改变，只是内容改变了。 url 保留在 /login.

我可以在用户登录时简单地调用 Get.toNamed("dashboard")，但随后仪表板页面将暴露给 url，允许用户访问 /dashboard url即使他没有登录。

我也不想在我创建的每个小部件或页面中创建一个检查，因为那样效率很低。有没有办法检查用户是否已登录，如果没有，则在每次 url 输入时将用户重定向到登录页面？

示例：

www.adress.com/dashboard would redirect to www.adress.com/login 如果用户未登录

有没有一种方法可以普遍检查授权状态并相应地使用 GetX 重定向用户？

旁注：我每次都能获得正确的身份验证状态，这不是问题，因为我使用的是 GetX。

简短摘要： 是否可以在实际小部件之外检查身份验证状态（例如在 GetMaterialApp 中）并将任何未经身份验证的用户重定向到登录页面，即使他们输入 /dashboard url?

Answer 1

使用中间件检查用户是否通过身份验证

GetMaterialApp(
      initialBinding: InitialBinding(),
      debugShowCheckedModeBanner: false,
      theme: CustomTheme().getLightTheme,
      themeMode: ThemeMode.light,
      title: "----------",
      initialRoute: "/dashboard",
      unknownRoute: GetPage(name: "/notfound", page: () => NotFoundPage()),
      getPages: [
        GetPage(name: "/login", page: () => Root()),
        GetPage(name: "/dashboard", page: () => Dashboard(), middleware: [AuthMiddleware()]),
      ],
    ),

class AuthMiddlware extends Middlware {
   RouteSetting? redirect(String? route) => !isAuthenticated ? RouteSetting(name="/login") : null;
}

Answer 2

如果用户在您的 Web 应用程序中请求任意页面，那么您可能希望在继续访问请求的页面之前使用登录页面进行拦截。您可以通过将 return url 传递到登录页面来执行此操作...

main.dart

GetMaterialApp(
  ...
  initialRoute: "/dashboard",
  getPages: [
    GetPage(name: "/login", page: () => Root()),
    GetPage(
      name: "/dashboard", 
      page: () => Dashboard(), 
      middlewares: [AuthMiddleware()]
    ),
  ],
),

class AuthMiddleware extends GetMiddleware {
  RouteSettings? redirect(String? route) {
    String returnUrl = Uri.encodeFull(route ?? '');
    return !isAuthenticated
      ? RouteSettings(name: "/login?return=" + returnUrl)
      : null;
  }
}

然后在您的登录页面中，登录后您可以直接返回到原始请求预期的位置...

login.dart

    //after successful login...
    String returnUrl = Get.parameters['return'] ?? '/';
    Get.offAllNamed(returnUrl);

如果未通过身份验证，Flutter Web 重定向用户

Flutter web redirect user if not authentiacted

web

firebase

flutter

flutter-web

flutter-getx