How to trigger login page if user not logged in?

Dear Friends,

I want to open login page if the user is not logged in globally, which mean the validation should check for each page. so I used async in my app init, but it’s not working.

Please help me to resolve this. Thanks in advance.

app.js

var token = '';
// Dom7
var $ = Dom7;

// Init App
var app = new Framework7({
    async: function (routeTo, routeFrom, resolve, reject) {
        if (token == '') {
            resolve({
                templateUrl: './login.html'
            })
        }
    },
    id: 'io.framework7.testapp',
    root: '#app',
    theme: 'md',
    methods: {
        helloWorld: function () {
            app.dialog.alert('Learning Arabic');
        },
    },
    panel: {
        swipe: 'both',
    },
    routes: routes,
    view: {
        pushState: true,
        preloadPreviousPage: false,
    },
    cache: false,
});

route.js

var routes = [
	{
		name: 'login',
		path: '/login',
	    url: './login.html',
		on: {
			pageInit: function(event, page) {
				console.log('Login Page');

				page.app.params.panel.swipe = false;
			}
		},
    },
	{
		name: 'home',
		path: '/',
	    url: './index.html',
		on: {
			pageInit: function(event, page) {
				console.log('Home Page');

				page.app.params.panel.swipe = 'left';
			}
		},
    },
]

async only supported for routes, not the app parameter

So you need to specify it on every route

Or keep just one login route in routes and if user is logged in the push other routes to routes array

In v3, I realized this.
{ path: '/', componentUrl: './views/home.html', beforeEnter:function(routeTo, routeFrom, resolve, reject){ if(localStorage.getItem('islogin') == null){ app.loginScreen.open('#my-login-screen'); } resolve(); } }

1 Like