Best practice to separate Welcome page and App pages

Hello, it’s my first topic :slightly_smiling_face:

I’m using F7 4.4.10 and want to prototype my future application (Android, IOS) with next features:

  • Welcome page with login & register pages, no toolbar, no slide panel. Only one view.
  • App pages: objects, object page, user profile, etc. Maybe a few views, tabbar as views, slide bar maybe.

I didn’t found middleware for authentication check so I managed like this


var authCheck = function (routeTo, routeFrom, resolve, reject) {
    auth.isAuthenticated().then(function (key) {
        // set header for requests
        resolve({ component: ObjectsPage });
    }).catch(function () {
        resolve({ component: WelcomePage });

var routes = [
        path: '/',
        async: authCheck
        path: '/welcome',
        component: WelcomePage,
        path: '/objects',
        component: ObjectsPage


    <div class="page no-toolbar no-swipeback" data-name="welcome">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="title">title</div>

        <div class="page-content">
            <div class="block block-strong">
                <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab
                    contains independent view with its own routing and navigation.</p>

                <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without
                    navbar like this tab.</p>


<div class="statusbar"></div>
<div class="views tabs safe-areas">
    <div class="toolbar tabbar toolbar-bottom tabbar-labels">
        <div class="toolbar-inner">
            <a href="#view-main" class="tab-link tab-link-active">
                <i class="icon f7-icons if-not-md">list</i>
                <i class="icon material-icons if-md">list</i>
                <span class="tabbar-label">List</span>
            <a href="#view-map" class="tab-link">
                <i class="icon f7-icons if-not-md">world</i>
                <i class="icon material-icons if-md">language</i>
                <span class="tabbar-label">Map</span>
            <a href="#view-profile" class="tab-link">
                <i class="icon f7-icons if-not-md">person</i>
                <i class="icon material-icons if-md">person</i>
                <span class="tabbar-label">Profile</span>

    <div id="view-main" class="view view-main view-init tab tab-active" data-url="/"></div>
    <div id="view-map" class="view tab" data-url="/map"></div>
    <div id="view-profile" class="view tab" data-url="/profile"></div>


methods: {
    logout: function () {
        var router = this.$f7router;
        var app = this.$f7;

        app.dialog.confirm('Really?', function () {
            // auth.logoutUser().then(function () {
                // location.reload();
            // });

It works with some workarounds… Is there any way to separate welcome views and all app views?

I realized that after log out and log in again, technically, I’m in profile view and #view-profile tabbar is active. How can I resolve this problem?

After page reloading I can see the raw content without styling for one second. Something wrong with my code?

You can just put your Welcome page to the Login Screen on app root that will be on top of the rest content. And hide/show it on login/logout

I appreciate your help. I will try. Only one problem for now is routing. When in routes.js I doing

resolve({ component: ObjectsPage });

Technically I’m on / route with HTML content of ObjectsPage component. So if I execute this code router.navigate(’/objects’); I will be redirected on the same page again… :thinking: