View-main stuck on back action

App.js :

let $$ = Dom7;
let app = new Framework7({
    root: '#app', // App root element
    init: false,
    view: {
        pushState: true,
    },
    name: 'myApp', // App name
    theme: 'aurora', // Automatic theme detection
    panel: {
        swipe: 'left',
        leftBreakpoint: 768,
        rightBreakpoint: 1440,
    },
    // App routes
    routes: routes,
});

let ls = app.loginScreen.create({ el: '.login-screen' });
app.on('init', function (e) {
    console.log('app is initialized')
    if (sessionStorage.token) {
        app.views.create('.view-main', { url: '/' });
    } else {
        console.log('/app.js/ no token found, please login')
        ls.open(false);
    }
})

$$(document).on('page:init', function (e) {
    // Page Data contains all required information about loaded and initialized page
    let page = e.detail;
    console.log('initialized page : ' + page.name)
})
$$(document).on('page:mounted', function (e) {
    // Page Data contains all required information about loaded and initialized page
    let page = e.detail;
    console.log('page mounted : ' + page.name)
})
$$(document).on('page:beforeremove', function (e) {
    // Page Data contains all required information about loaded and initialized page
    let page = e.detail;
    console.log('page removed : ' + page.name)
})
app.init()
// Login Screen
$$('#my-login-screen .login-button').on('click', function () {
    let username = $$('#my-login-screen [name="username"]').val();
    let password = $$('#my-login-screen [name="password"]').val();
    let users ={username:username,password:password}

    console.log('send credentials !')
    socket.emit('credentials', users)
    socket.on('login',function(msg) {
        if (ls.opened)
            $$('#loginText').html(msg)
    })
    socket.on('loginSuccess',function(token) {
        sessionStorage.setItem('token',token)
        console.log('login success, get a token : ' + token)
        let view = app.views.create('.view-main', { url: '/' });
        ls.close()
    })
});
$$(document).on('click', '#logout', function () {
     console.log('logout')
     app.preloader.show();
     app.view.destroy()
     sessionStorage.removeItem('token',token),       
     app.view.main.router.navigate('/',{reloadAll:true})
     app.preloader.hide() )
})

Route.js

function checkAuth(to, from, resolve, reject) {
    let router = this
    let app = router.app
    if (sessionStorage.token)  {
        console.log('you have a token')
        let jwt = sessionStorage.getItem('token')
        socket
            .emit('authenticate', {token: jwt}) //send the jwt
            .on('authenticated', function () {
                console.log('token is valid !')
                resolve()
            })
            .on('unauthorized', function(msg) {
                console.log("unauthorized: " + JSON.stringify(msg.data));
                throw new Error(msg.data.type);
            })
    } else {
        console.log('no token found, please login')
        router.navigate('/',{reloadAll: true})
        reject()
    }
}
var routes =  [
{
    path: '/',
    url: './pages/home.html',
    beforeEnter: checkAuth,
},
{
    path: '/configuration/',
    url: './pages/configuration.html',
},
];  

index.html

<body>
<div id="app">
<div class="panel panel-left panel-reveal theme-dark">
    <div class="view">
        <div class="page"></div>
    </div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main"></div>
<!-- Login Screen -->
<div class="login-screen" id="my-login-screen">
  <div class="view view-init">
    <div class="page" data-name="login">
      <div class="page-content login-screen-content">
        <div class="login-screen-title">Login</div>
        <div class="list">
          <ul>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Username</div>
                <div class="item-input-wrap">
                  <input type="text" name="username" placeholder="Your username">
                </div>
              </div>
            </li>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input-wrap">
                  <input type="password" name="password" placeholder="Your password">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link list-button login-button">Sign In</a>
            </li>
          </ul>
          <div class="block-footer" id="loginText">Click "Sign In" to close Login Screen</div>
        </div>
      </div>
    </div>
  </div>
</div>

Hi everyone, i discovered Framework7 and since love it !
i tried many way to add authentification to my Web app and many can work however not with me…and because of me :face_with_hand_over_mouth: :sweat_smile:

Authentification works but when i click on links (ajax page)
then click back
view-main page stuck and nothing
link in panel work once : page open and close directly

Please help when you have time for it of course
thank’s.
(Sorry for English, I’m french, and loving english)

Issue can be because of this:

If you disable it, will it work? Otherwise, would be good to see live example

Hi, thanks for response.

Page will be blocked because of use of socket.io in beforeEnter with bad logic.
My real problem is Authentification over socket.io ( not only authenticate socket but request too with token instead of ajax request)

So i would try that :

  • App start and open loginScreen :ok:
  • create first socket to html() error messages and send credentials :ok:
  • user login , create second socket, authenticated_socket with "socket.io-jwt"
  • find how beforeEnter function can use authenticated_socket to check if exists
  • how destroy view-main page when user logout

Go ! Go ! Go ! :gun: Slowly but surely :turtle:

Anyone know solutions ?