Regarding login & authentication, I believe the best practice is to implement an API service. It will insert authorization token into each API request. In case HTTP 401 is captured, it can reset stored auth token and it will wake up the login screen. (In backend, if there is refresh token API, the service can keep your login session active.)
I see in F7 documentation, normally we define a login route. But I would recommend to add an invisible login-screen view, and once auth token is invalid, make the login-screen visible.
The benefits are
- The code is very easy to maintain. Just hide the login-screen, if you don’t need it.
- After login is successful, you have flexibility.
a. You can choose to hide the login-screen, so previous screen can be resumed.
b. You can force navigate to the landing page.
Here is my code snippet in Framework7-vue.
Hope this can help you.
(The only difficulty I still have, is that the login-screen is pop up from bottom. I’d like to have a f7-dive effect as transition)
<!-- todo: figure out how to show page transition -->
<f7-views tabs class="safe-areas">