laravel - vuejs 2 中的 Watch 方法不更新 isAuth 的值

Question

嘿，我是 vuejs 的新手。我试图为一个基本站点建立身份验证。到目前为止我所做的是用户能够注册和登录并相应地向他显示 View 但是我遇到的唯一问题是当用户获得身份验证时我添加到隐藏和显示导航栏的 isAuth 变量没有即使我把它放在 watch 方法中也会得到更新。当我点击刷新时它工作正常..我也尝试过使用 vuex。它似乎不起作用。目前我正在使用一个内置的自定义身份验证包，它返回 token 。

我正在使用 Vuejs 2 和 Laravel 5.4:

这是我的身份验证包:

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
    }
}
})
}

这是登录vue脚本:

   <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;
        }
    }
}

这是我使用 watch 隐藏显示导航的实际位置:

<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

在您的登录 vue 脚本中，您没有更改路线。您正在观看 navgation.vue 中的路由方法。为了让它工作，只需添加 this.$router.push('any_path'); 收到登录响应后