TypeError: 정의되지 않은 Vuej의 속성 '$auth'를 읽을 수 없습니다.

TypeError: 정의되지 않은 Vuej의 속성 '$auth'를 읽을 수 없습니다.

vuejs 2에 larabel 5.4를 내장하여 사용하고 있습니다.저는 라라벨 여권을 이용한 인증 서비스를 구축하려고 합니다.사용자를 로그인할 수 있었지만 vue js에 문제가 있습니다.프런트 엔드 토큰을 취급하는 커스텀 Auth 패키지를 작성했습니다.속성 'set'을 읽을 수 없습니다.라는 오류가 표시됩니다.토큰'이 정의되지 않았습니다.

인증 패키지는 다음과 같습니다.

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'
// });

그리고 이것이 드디어 나의 로그인 방법입니다.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);
                });

        },

작업 코드: 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();
    }
});

의 정의는 어디에 있는지 찾을 수 없다self자신을 대신할 수 있어요$auth'와this.$auth또한 콜백 대신 화살표 기능을 사용해야 합니다.then()

언급URL : https://stackoverflow.com/questions/43512856/typeerror-cannot-read-property-auth-of-undefined-vuejs