在vuejs 2中观看方法不更新isAuth的值

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

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

这是真正的地方e我正在使用手表隐藏显示导航：

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

来源

2017-04-21 Syed Abdur Rehman Kazmi

在您的登录vue脚本中，您没有更改路线。您正在navgation.vue中观看路线方法。为了使其工作，只需添加此。$ router.push（'any_path'）; 当你得到登录回复

来源

2017-04-21 06:51:39

谢谢你..你刚刚为我节省了一天。 –

在vuejs 2中观看方法不更新isAuth的值

回答

相关问题