Route Guards


Route guards are powerful tools that can protect pages, or perform certain actions before entering a page. In this example, we'll use a guard to check if a book exists before pushing the BookDetailsPage . If the bookId is found, we push the page. If not, we'll push a Not Found page. Get started by first creating the guard:

class CheckIfBookExists extends AutoRouteGuard {
  
  void onNavigation(NavigationResolver resolver, StackRouter router) async {
    final bookId = resolver.route.pathParams.get("bookId");
    final book = checkIfBookExists(bookId);
    if (book != null)
      resolver.next(true); // book was found. proceed to the page
    else
    router.push(NotFoundRoute());
  }
}

Now, protect the BookDetailsPage with the guard. Here's what our final app router looks like.
(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: "/login",
      page: LoginWrapperPage,
      children: [
        AutoRoute(page: EmailPage),
        AutoRoute(page: PasswordPage),
      ]
    ),
    AutoRoute(
      path: "/",     
      page: HomePage,
      usesTabsRouter: true,
      children: [    
        AutoRoute(
          path: "books",
          name: "BooksRouter",
          page: BooksWrapperPage,
          children: [
            AutoRoute(path: "", page: BooksPage),
            // add the guard here to check if the bookId exists first before pushing the page
            AutoRoute(path: ":bookId", guards: [CheckIfBookExists], page: BookDetailsPage),
            RedirectRoute(path: "*", redirectTo: ""),
          ], 
        ),
        AutoRoute(
          path: "account",
          name: "AccountRouter",
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: "", page: AccountPage),
            AutoRoute(path: "details", page: AccountDetailsPage),
            RedirectRoute(path: "*", redirectTo: ""),
          ],
        ),
      ],
    ),
  ],
)
class $AppRouter {}

Finally, add the guard into your main router declaration and you are done!
class App extends StatelessWidget {
  final _appRouter = AppRouter(checkIfBookExists: CheckIfBookExists());

  
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _appRouter.defaultRouteParser(),
      routerDelegate: _appRouter.delegate(),
    );
  }
}