vuejs 2의 watch 메서드가 isAuth 값을 업데이트하지 않음

vuejs 2의 watch 메서드가 isAuth 값을 업데이트하지 않음

안녕, 나는 vuejs의 신참이야.기본 사이트에 대한 인증을 만들려고 했었어.지금까지 내가 한 일은 사용자가 등록하고 로그인할 수 있고 그에 따라 보기를 그에게 보여주지만, 내가 얻는 유일한 문제는 사용자가 내가 숨겨서 내비게이션 바를 보여주기 위해 추가한 isAuth 변수가 watch method에 넣었음에도 업데이트되지 않는 것이다.내가 refresh를 치면 그때 잘 되겠지..나도 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>

로그인 vue 스크립트에서 경로를 변경하지 않는 경우.당신은 항해에서 경로법을 보고 있다.vue. 잘 되려면 이것만 추가하면 된다.$162.168any_path'; 로그인에서 응답을 받은 후

참조URL: https://stackoverflow.com/questions/43535175/watch-method-in-vuejs-2-not-updating-the-value-of-isauth