Hello, it’s my first topic
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?