View-main stuck on back action


#1

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)


#2

Issue can be because of this:

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


#3

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 ?