Route Guards in Flutter

Question

In Angular, one can use the canActivate for route guarding.

In Flutter, how would one go about it? Where is the guard placed? How do you guard routes?

I'm thinking along the lines of this:

• User logged in. Their token is stored in Shared Preference (the right way to store tokens? )
• User closed the app.
• User opens app again. As the application starts, it determines if user is logged in (perhaps a service that checks the storage for token), and then
• If logged in, load the homepage route
• If not logged in, load the login page

Answer 1

I was stumbling over this problem too and ended up using a FutureBuilder for this. Have a look at my routes:

final routes = {   '/': (BuildContext context) => FutureBuilder<AuthState>(     // This is my async call to sharedPrefs     future: AuthProvider.of(context).authState$.skipWhile((_) => _ == null).first,     builder: (BuildContext context, AsyncSnapshot<AuthState> snapshot) {       switch(snapshot.connectionState) {         case ConnectionState.done:           // When the future is done I show either the LoginScreen            // or the requested Screen depending on AuthState           return snapshot.data == AuthState.SIGNED_IN ? JobsScreen() : LoginScreen()         default:           // I return an empty Container as long as the Future is not resolved           return Container();       }     },   ), }; 

If you want to reuse the code across multiple routes you could extend the FutureBuilder.