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

Posted 2023-02-23

【中文标题】如果未通过身份验证，则颤振 Web 重定向用户

【英文标题】：Flutter web redirect user if not authentiacted

【发布时间】：2021-10-11 08:11:19

【问题描述】：

我有一个带有命名路由的 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

将重定向到

www.adress.com/login

有没有办法使用GetX 来检查身份验证状态并相应地重定向用户？

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

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

【问题讨论】：

可以使用GetX中间件：pub.dev/packages/get#getpage-middleware

【参考方案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;

【讨论】：

非常感谢！我只需要将 Middleware 更改为 GetMiddleware 并将 RouteSetting 更改为 RouteSettings :)

【参考方案2】：

如果用户在您的 Web 应用程序中请求任意页面，那么您可能希望在继续访问所请求的页面之前拦截登录页面。您可以通过将返回 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;
  

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

登录.dart

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