Мой мод начальной загрузки не будет отображаться, когда я использую поле requireAuth в vuejs - PullRequest
Новая
       8

Мой мод начальной загрузки не будет отображаться, когда я использую поле requireAuth в vuejs

0 голосов
/ 16 октября 2018

Мой Bootstrap Modal не отображается, когда я помещаю его в поле requireAuth в vue-router

Это мой блейд-файл: 

<!DOCTYPE html>    
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="#">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="#">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="shortcut icon" href="#">

<title>Title</title>
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
<link rel="stylesheet" href="{{ asset('css/fonts.css') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">

<script>
    window.App = {!! json_encode([
        'csrfToken' => csrf_token(),
        'user' => Auth::user(),
        'signedIn' => Auth::check(), // returns false if the user is not logged and true if it's logged on 
        'postRegisterUrl' => route('postRegister')
        ]) !!};
</script>

</head>
<body>



<div id="app">

    {{-- Header and Navbars --}}
    @include("app.partials.header")



    @include("app.partials.modal")


    <transition name="custom-classes-transition" enter-active-class="animated bounceInUp">

        <router-view></router-view>

    </transition>

    @include("app.partials.footer")




</div>

<!--//END FOOTER -->

<!-- jQuery, Bootstrap JS. -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>

<script src="{{ asset('js/popper.min.js') }}"></script>

<script src="{{ asset('js/bootstrap.min.js') }}"></script>

<script src="{{ asset('js/app.js') }}"></script>

<script>
    $(function() {
        $('.navbar-collapse a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });

        $('#signInModal').on('hidden', function() {
         $(this).find('form')[0].reset();
        });

    }) ; 
</script>


</body>
</html>

Это мой файл app.js, которыйвключает в себя модули, которые мне нужны 

import axios from 'axios' ;  

import InstantSearch from 'vue-instantsearch';

import Vue from 'vue';

import VueRouter from 'vue-router';

import * as VueGoogleMaps from 'vue2-google-maps';



window.Vue = Vue ; 

window.axios = axios ; 

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};


Vue.use(VueRouter);

Vue.use(InstantSearch) ;

Vue.use(VueGoogleMaps, {
    load: {
        key: 'AIzaSyA6vKL6Q4u5ZhGAJlYOMkQZ13pxCUXOe9k',
        libraries: ['places','drawing']
    }
});




// Prototypes can be used to assign a variable globally.. 
Vue.prototype.$registrationUrl = window.App.postRegisterUrl ;

Vue.prototype.$signedIn = window.App.signedIn ; 

// I need to know/turn on the stats&tools of my app  

Vue.config.devtools = true ; 

Vue.config.performance = true ;

Это мой файл route.js 

import VueRouter from 'vue-router';

import RegisterSpace from './v1/pages/RegisterSpace.vue';


/** 

This will check if the User is logged in or not
*/
function requireAuth(to, from, next) { 


    /** This will show the login modal so that users can log on to the site */

function showLoginModal() { 

        // $("#signInModal").modal() ; 

        console.log("Function for opening the bootstrap modal");

    }   


    /** 
    Where we would send the user
     */
function proceed () {    

    // if user is not signed in / authenticated -> then show the login modal

        if ( $signedIn  === false ) { 
            showLoginModal()  ;
        }

        // otherwise just proceed to that route
        else {  
            next() ; 
        }
    }
}


let routes = [ 
{ 

    path : '/register-space',
    name : 'registerSpace' , 
    component : RegisterSpace,
    beforeEnter: requireAuth

}
];

Я хочу увидеть представление RegisterSpace, если пользователь вошел в систему, но мой логинмодал не появится?В чем может быть возможная ошибка в моем коде?

...