Best practice to separate Welcome page and App pages

Questions
1

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

routes.js

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
    },
]

welcome.html

<template>
    <div class="page no-toolbar no-swipeback" data-name="welcome">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="title">title</div>
            </div>
        </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>
        </div>
    </div>
</template>

index.html

<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>
            <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>
            <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>
            </a>
        </div>
    </div>

    <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>
</div>

profile.html

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

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

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?

2

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

3

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: