VueJs“全局”事件未在我的类文件中触发

Question

我有一段代码 (auth.js) 应该在用户成功登录后触发。但我注意到 2 行似乎不起作用。它没有被触发。

this.$axios.defaults.headers.common['Authorization'] = 'Bearer' + token; 和 this.$eventHub.$emit('userLoggedIn');

我需要做些什么来使两者都能正常工作吗？我已将它们设置为可在全球范围内访问。我检查了这一行： localStorage.setItem('user', JSON.stringify(user)); 并且似乎工作正常。

我已尝试删除 this 字词，但无济于事。

main.js

import auth from '@/auth'

import axios from 'axios'

Vue.prototype.$axios = axios
Vue.prototype.$auth = auth
Vue.prototype.$eventHub = new Vue();

auth.js

class Auth {
    constructor() {
        this.token = null;
        this.user = null;
    }
    login(token, user) {     

        localStorage.setItem('token', token);
        localStorage.setItem('user', JSON.stringify(user));

        this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

        this.token = token;
        this.user = user;

        this.$eventHub.$emit('userLoggedIn');
    }
    check() {
        return !! this.token;
    }
}
export default new Auth();

这是我的 Login.vue 中调用 auth.js 登录方法的代码：

        login() {
            let data = {
                email: this.username,
                password: this.password
            };
            this.$axios.post('http://127.0.0.1:8000/api/login', data)
            .then(({data}) => {
                if (data.status == 200) {
                    this.$auth.login(data.data.token, data.data.user);
                    this.$router.replace('about');
                } else {
                    // console.log("Error");
                }
            })
            .catch(() => {                    
                //alert(response.data.message);
            });
        }

Answer 1

Auth 类中的this 关键字没有指向 Vue 实例。您可以像这样将 Vue 实例作为登录方法的参数传递：

class Auth {
    constructor() {
        this.token = null;
        this.user = null;
    }
    login(vue, token, user) {     

        localStorage.setItem('token', token);
        localStorage.setItem('user', JSON.stringify(user));

        vue.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

        this.token = token;
        this.user = user;

        vue.$eventHub.$emit('userLoggedIn');
    }
    check() {
        return !! this.token;
    }
}
export default new Auth();

然后这样调用登录方法：

this.$auth.login(this, data.data.token, data.data.user);