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 {
@override
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());
}
}
BookDetailsPage
with the guard. Here's what our final app router looks like.@MaterialAutoRouter(
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 {}
class App extends StatelessWidget {
final _appRouter = AppRouter(checkIfBookExists: CheckIfBookExists());
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationParser: _appRouter.defaultRouteParser(),
routerDelegate: _appRouter.delegate(),
);
}
}