Javascript 在Vue中路由后未定义的auth0变量

我试图在同事度假时将Auth0添加到Vue应用程序中，但我正在努力创建一个可重用的导航栏

我按照教程进行了大部分设置：

我的main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
import Vuex from 'vuex'
import store from './Store'
import 'vue-awesome/icons'
import icon from 'vue-awesome/components/Icon'
import auth from './auth/auth'
import meta from 'vue-meta'

Vue.config.devtools = true;
Vue.config.productionTip = false;
Vue.config.errorHandler = function(err, vm, info) {
    console.log("error: " + err);
    console.log("error info: " + info);
};
Vue.use(BootstrapVue);
Vue.use(Vuex);
Vue.use(auth);
Vue.use(meta)

Vue.component('icon', icon);

new Vue({
    router,
    store: store,
    render: h => h(App)
}).$mount('#app');

我的App.vue：

<template>
    <b-container>
        <div id="app">
            <navbar/>
            <router-view/>
        </div>
    </b-container>
</template>

<script>
import WidgetBuilder from './components/WidgetBuilder/WidgetBuilder'
import Navbar from './components/NavBar.vue'

export default {
    name: 'app',
    components: {
        Navbar: Navbar,
        WidgetBuilder: WidgetBuilder
    }
}
</script>

如果我直接访问

/home

，它可以正常工作

我不是一个真正的JS开发人员，这个ES6的东西也可能是阿拉伯语，你们有没有vue专家给我指出了正确的方向

我尝试过像这样从组件传递变量：

<template>
    <b-container>
        <div id="app">
            <navbar :auth="$auth"/>
            <router-view/>
        </div>
    </b-container>
</template>

我已经尝试将服务导入到我的Navbar组件中（尽管这让我很恼火）

我用mounted（）和data（）在navbar组件中尝试了不同的重定向、重新身份验证和重新移动

---

我确信这很简单，但我很恼火，因为正如我所说的，我现在对它完全陌生。

对象

这个。$auth

是由Auth0的自定义插件提供的，在指南中，您可以阅读如何安装和使用它：

---

我也遵循了教程，遇到了同样的问题

由于navbar组件在my App.vue中，而不是在my home组件中，我发现工具栏是在auth0的响应设置为localStorage之前呈现的（因此，第二次加载时刷新工作正常）。将导航栏组件移动到主组件中解决了这个问题，但这对我来说并不理想

我使用了一个类似的堆栈溢出问题所推荐的事件总线方法-

auth.js

   user: {
  get: function() {
    return JSON.parse(localStorage.getItem('user'))
  },
  set: function(user) {
    localStorage.setItem('user', JSON.stringify(user))
    this.$bus.$emit('logged', 'User logged')
  }
}

导航栏

data() {
  user: this.getUser() 
}
created () { 
    this.$bus.$on('logged', () => { 
        this.user = this.getUser() 
    }) 
}, 
methods: {   
getUser: function () { 
  var user = JSON.parse(localStorage.getItem('user')); 
  if (user === null) { 
    return '' 
  } else { 
    return user 
  } 
} 

},

---

不是最干净的解决方案，但它对我有效。

伙计。。。我不是故意忘恩负义，而是“我遵循了一个教程来设置它的大部分内容：”问题是我遵循了那个教程，我有这个问题，然后你错过了一些步骤，可能是将插件安装到了你的vue实例中：

import auth from'@/auth'vue.use（auth）

在

main.js

文件中。我不这么认为，登录时它似乎工作得很好，这只是我遇到麻烦的最初回调重定向。。无论如何，我已经用当前的main.js更新了我的问题

<template>
    <b-container>
        <div id="app">
            <navbar :auth="$auth"/>
            <router-view/>
        </div>
    </b-container>
</template>

   user: {
  get: function() {
    return JSON.parse(localStorage.getItem('user'))
  },
  set: function(user) {
    localStorage.setItem('user', JSON.stringify(user))
    this.$bus.$emit('logged', 'User logged')
  }
}

data() {
  user: this.getUser() 
}
created () { 
    this.$bus.$on('logged', () => { 
        this.user = this.getUser() 
    }) 
}, 
methods: {   
getUser: function () { 
  var user = JSON.parse(localStorage.getItem('user')); 
  if (user === null) { 
    return '' 
  } else { 
    return user 
  } 
}