Framework7: Login redirect

问题

When user visits login.html page, localStorage is used to check if a user is logged in. The page should redirect to profile.html and display notofication message. The message is displayed, but the page (login.html) is the same..

if( localStorage.user_login ) {
    mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true });

myApp.addNotification( {
        message: 'Welcome '+ localStorage.user_username +'!'
      } );
}

How can i make the page redirect if the user is logged in?

回答1:

put this before myApp framework7 initialization.

    $$(document).on('pageInit', function (e) {
       var page = e.detail.page;
       if (page.name === 'index') {
         try{
           var storedData = window.localStorage['f7form-'+ 'idofyourloginform'];
          if(storedData) {
              //do your ajax login request here
              // if successful do your login redirect  
                 mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true });
           }
       }
     );

回答2:

Try calling

myApp.closeModal('.login-screen.modal-in')

before

 mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true })

That should solve the problem.

回答3:

inside your my-app.js file use like this codes

myApp.onPageInit('sign-in', function(page) {
$('#loginb').click(function() {
    $('#loginb').html('Please Wait...');
    var fuid = $('#uid').val();
    var fpass = $('#pass').val();
    $.ajax({
        url: 'chklogin.php',
        data: {
            "uid": fuid,
            "pass": fpass
        },
        type: 'post',
        success: function(returnedData) {
            $('#loginb').html(returnedData);

            if (returnedData == "Success") {
                mainView.router.load({
                    url: 'deshboard.php',
                    ignoreCache: true
                });
            } else {
                mainView.router.load({
                    url: 'login.php',
                    ignoreCache: true
                });
            }
        }
    });
});
});

回答4:

Inside your Login page, use like this codes:

HTML

<a href="#" class="button button-fill color-blue close-login-screen" @click="signIn">Log In </a>

JavaScript

return {
  methods: {
    signIn: function () {
      var $ = this.$;
      var app = this.$app;
      var username = $('input#demo-username-1').val();
      var password = $('input#demo-password-2').val();

      app.request.post('http://localhost:4103/api/User/Login?username='+username+'&password='+password, function (data) {
        var obj = JSON.parse(data);
        console.log(obj);
        console.log(obj.success);

        if (obj.success) {
          app.data.IsLogin=true;
          app.data.UserName='salman';
          app.views.main.router.navigate(obj.RedirectUrl);       
        } else {
          app.dialog.alert(obj.Message , function () {});
        }
      });
    }
  }
}

回答5:

Use this function with route name: app.views.main.router.navigate('/profile');

But make sure app is which you initialize project such as:

var app = new Framework7({....});

来源：https://stackoverflow.com/questions/37161998/framework7-login-redirect

标签

javascript

jquery

html-framework-7