laravel - styde - Ver el método en vuejs 2 sin actualizar el valor de isAuth

vue 2 curso

Question

Hola, soy novato de vuejs. Estaba tratando de construir una autenticación para un sitio básico. Lo que he hecho hasta ahora es que el usuario puede registrarse e iniciar sesión y las vistas se le muestran en consecuencia, pero el único problema que tengo es cuando el usuario se autentica la variable isAuth que he agregado para ocultar y mostrar la barra de navegación. se actualiza a pesar de que lo he puesto en el método de observación. Cuando presiono actualizar, funciona bien, entonces ... He intentado usar vuex también. Parece que no funciona. Currenlty estoy usando un paquete de autenticación personalizado integrado que devuelve el token.

Estoy usando Vuejs 2 y Laravel 5.4:

Este es mi paquete de autenticación:

export default function (Vue){
Vue.auth = {
    // set token
    setToken (token , expires_in){
    localStorage.setItem(''token'' , token);
    localStorage.setItem(''expires_in'' , expires_in)
    },
    // get token
    getToken (){
        var token = localStorage.getItem(''token'')
        var expires_in = localStorage.getItem(''expires_in'')
        if( ! token || ! expires_in)
        {
            return null ;
        }
        if(Date.now() > parseInt(expires_in)){
            this.destroyToken();
            return null;
        }
        return token;
    },

    // destroy token
    destroyToken (){
        console.log(''destroyToken'');
    localStorage.removeItem(''token'');
    localStorage.removeItem(''expires_in'')
    },

    // isAuthenticated
    isAuthenticated (){
    return this.getToken()
    }
};

Object.defineProperties(Vue.prototype , {
        $auth : {
    get(){
        return Vue.auth
    }
}
})
}

Este es el script vue de inicio de sesión:

   <script type="text/babel">

export default{
    data() {
        return {
            loginForm: {
                email: '''',
                password: ''''
            },
            forgotForm :{
                email : ''''
            },
            toggleForms: false,

        }
    },
    created(){
    console.log(this.$store.state);
    },
    methods: {
        login (loginForm){
            let self = this ;
            var data = {
                client_id : 2,
                client_secret : ''8WCDtW3wKeeNUBgwHviFoX7JmaVPU0HjFto9kwqv'',
                grant_type     : ''password'',
                username : loginForm.email,
                password : loginForm.password
            };
            console.log(this.$store.state);
            axios.post(''/oauth/token'', data)
                .then((response) =>{

                    self.$auth.setToken(response.data.access_token , response.data.expires_in+ Date.now());
                console.log(response.data.expires_in);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

        forgotPassword: function () {
            axios.post(''/password'', this.forgotForm).then(function (response) {
                console.log(response);
            }).catch(function (error) {
               console.log(error);
            });
        },

        hideShowForms: function () {
            this.toggleForms = !this.toggleForms;
        }
    }
}

Y este es el lugar real donde estoy usando watch para ocultar la navegación del show:

<template>
    <div>
        <guest-main v-show="!isAuth"></guest-main>

        <auth-main v-show="isAuth"></auth-main>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                isAuth : this.$auth.getToken()
            }
        },
        watch: {
            $route () {
                if (!this.$auth.getToken()) {
                    this.isAuth = false;

                    console.log("here");
                } else {

                    console.log(this.isAuth);
                    this.isAuth = true;

                }
            }
        }
    }
</script>

Answer 1

En su script vue de inicio de sesión no está cambiando la ruta. Estás viendo el método de ruta en navgation.vue. Para que funcione, solo agregue esto. $ Router.push (''any_path''); después de obtener la respuesta del inicio de sesión