Question

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

我正在使用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;
        }
    }
}

这是我使用手表隐藏节目导航的实际地方：

<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中查看路线方法。为了使其工作，只需添加此。$ router.push（＆＃39; any_path＆＃39;）; 收到登录后的回复

在vuejs 2中观察方法不更新isAuth

1 个答案: