вместо маршрутизации к файлу входа всегда выполняется маршрутизация к файлу индекса (framework7) - PullRequest
0 голосов
/ 01 апреля 2019

Когда страница загружается, она должна перенаправляться на страницу входа, поскольку еще нет имени пользователя. Но он всегда направляет и открывает индексную страницу, пока не должен открывать ее. Я пытался найти ответ, но не нашел ответа.

Но если я использую mainview.router.navigate, он может вернуться на страницу входа. Но это не то, что я хочу

Этот файл из my-app.js

var $$ = Dom7;

var app = new Framework7({
    root: '#app',
    name: 'F7App',
    id: 'com.ubaya.f7app',
    panel:{
        swipe: 'left',
        leftBreakpoint: 768,
        rightBreakpoint: 1440,
    },
    theme: 'ios',
    view:{
        iosDynamicNavbar: false,
    },
    routes: [
        {
            path: '/about/:aboutid',
            url: 'about.html',
        },
        {
            path: '/',
            url: 'index.html',
            on: {       
                pageInit: function (e, page){

                },
                pageAfterIn: function (event, page) {   
                   if(!localStorage.username) {             
                        page.router.navigate('/login/');
                    }
                }
            }
        },
        {
            path: '/login/',
            url: 'login.html',
            on: {
                pageInit: function(e, page){

                },
                pageAfterIn: function(event, page){
                    $$('#btnsignin').on('click', function(){
                        var x = new FormData($$(".form-ajax-login")[0]);
                        app.request.post('http://localhost/pmn/loginproses.php', x, function(data){
                            if(data === 'Success'){
                                localStorage.username = $$('#username').val();
                                app.dialog.alert(localStorage.username);
                                app.views.main.router.back('/');
                            }
                            else{
                                app.dialog.alert('Login Failed');
                            }
                        });
                    });
                }
            }
        }
    ]
});

var mainView = app.views.create('.view-main');

Это из login.html

<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
        <div class="page-content login-screen-content">
          <div class="login-screen-title">Instantgram</div>
          <form method="POST" action="http://localhost/pmn/loginproses.php" class="form-ajax-login">
            <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">
                      <input type="text" autofocus="" name="username" id="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">
                      <input type="password" name="password" id="password" placeholder="Your password">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li><a href="#" class="item-link list-button" id="btnsignin">Sign In</a></li>
              </ul>
              <div class="block-footer">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p><a href="#" class="close-login-screen">Close Login Screen</a></p>
              </div>
            </div>
          </form>
        </div>
</div>

Это из index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>Instantgram</title>
    <!-- Path to Framework7 Library Bundle CSS -->
    <link rel="stylesheet" href="css/framework7.bundle.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">
    <link rel="stylesheet" href="css/framework7-icons.css">
  </head>
  <body>
    <!-- App root element -->
    <div id="app">
      <!-- Statusbar overlay -->
      <div class="statusbar"></div>

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Instantgram</div>
            </div>
          </div>

          <!-- Bottom Toolbar -->
          <div class="toolbar tabbar tabbar-labels toolbar-bottom">
            <div class="toolbar-inner">
              <!-- Toolbar links  -->
              <a href="#" class="link">
                <i class="icon f7-icons if-not-md">home</i>
                <i class="icon material-icons md-only">home</i>
              </a>
              <a href="#" class="link">
                <i class="icon f7-icons if-not-md">search</i>
                <i class="icon material-icons md-only">search</i>
              </a>
              <a href="#" class="link">
                  <i class="icon f7-icons if-not-md">add_round</i>
                  <i class="icon material-icons md-only">add_round</i>
              </a>
              <a href="#" class="link">
                  <i class="icon f7-icons if-not-md">person_round</i>
                  <i class="icon material-icons md-only">person_round</i>
              </a>
            </div>
          </div>

          <!-- Scrollable page content -->
          <div class="page-content hide-toolbar-on-scroll">
            <div class="block">
                <p>Aemon, born Aemon Targaryen, is the third son of King Maekar I Targaryen and his wife Dyanna Dayne. He has served as a maester to the Night's Watch at Castle Black for so long that the rest of the Seven Kingdoms has forgotten about his Targaryen blood. ... Maester Aemon is present at ...</p>
                <p>Page content goes here</p>
                <!-- Link to another page -->
                <a href="/about/">About app</a>
                <a href="/login/">Login app</a>
            </div>            
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library Bundle JS-->
    <script type="text/javascript" src="js/framework7.bundle.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>
...