TypeError：无法读取未定义的Vuejs属性'$ auth'

Question

我正在使用vuejs 2与laravel 5.4集成在它中..我试图构建一个使用laravel护照的身份验证服务。我已经能够登录用户，但问题是与vue js。我创建了一个自定义Auth包来处理前端令牌。我不确定

我AUTH包获得的错误，因此无法读取属性“setToken”是这样的：

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 :()=>{ 

    }, 

    // destroy token 


    // isAuthenticated 
    isAuthenticated :()=>{ 
    if(this.getToken()) 
    { 
     return true 
    } 
    return false 
    } 
} 
Object.defineProperties(Vue.prototype , { 
    $auth : { 
     get:()=>{ 
     return Vue.auth 
    } 
    } 
}) 
} 

这是我的引导文件：

 window._ = require('lodash'); 

    /** 
    * We'll load jQuery and the Bootstrap jQuery plugin which provides support 
    * for JavaScript based Bootstrap features such as modals and tabs. This 
    * code may be modified to fit the specific needs of your application. 
    */ 
     window.$ = window.jQuery = require('jquery'); 

require('bootstrap-sass'); 

/** 
* Vue is a modern JavaScript library for building interactive web interfaces 
* using reactive data binding and reusable components. Vue's API is clean 
* and simple, leaving you to focus on building your next great project. 
*/ 

window.Vue = require('vue'); 

import VueRouter from 'vue-router'; 

import Auth from './packages/auth/Auth.js'; 

Vue.use(VueRouter); 
Vue.use(Auth); 

/** 
* We'll load the axios HTTP library which allows us to easily issue requests 
* to our Laravel back-end. This library automatically handles sending the 
* CSRF token as a header based on the value of the "XSRF" token cookie. 
*/ 

window.axios = require('axios'); 

window.axios.defaults.headers.common = { 
    'X-Requested-With': 'XMLHttpRequest' 
}; 

axios.defaults.baseURL = 'http://localhost/iAttendanceLaravel/public/'; 



/** 
* Echo exposes an expressive API for subscribing to channels and listening 
* for events that are broadcast by Laravel. Echo and event broadcasting 
* allows your team to easily build robust real-time web applications. 
*/ 

// import Echo from 'laravel-echo' 

// window.Pusher = require('pusher-js'); 

// window.Echo = new Echo({ 
//  broadcaster: 'pusher', 
//  key: 'your-pusher-key' 
// }); 

这是最后我的登录方法在login.vue文件中：

methods: { 
     login: function() { 

      var data = { 
       client_id : 2, 
       client_secret : '8WCDtW3wKeeNUBgwHviFoX7JmaVPU0HjFto9kwqv', 
       grant_type  : 'password', 
       username : this.loginForm.email, 
       password : this.loginForm.password 
      }; 

      axios.post('/oauth/token', data) 
       .then(function (response) { 
        console.log(response); 
        self.$auth.setToken(response.body.access_token , response.body.expires_id + Date.now()); 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 

     }, 

Answer 1

回调的工作代码：https://jsfiddle.net/wostex/63t082p2/30/（最少的功能，只是为了显示它是如何工作）

const auth = { 
    setToken :() => { 
     console.log('inside setToken'); 
    }, 
    install: function(Vue){ 
     Object.defineProperty(Vue.prototype, '$auth', { 
     get() { return auth } 
     }) 
    } 
}; 

Vue.use(auth); 

new Vue({ 
    el: '#app', 
    mounted() { 
     this.$auth.setToken(); 
    } 
}); 

Answer 2

我找不到self的定义。 可以用this.$auth代替“自我$权威性。”，你应该使用箭头功能，而不是then()