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

Question

我正在尝试在同事休假时将 Auth0 添加到他的 Vue 应用程序，但我正在努力创建可重复使用的导航栏。

我按照教程进行了大部分设置：https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication

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

我的导航栏：

<template>
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="/home">
      <img src="https://a.storyblok.com/f/39898/1024x1024/dea4e1b62d/vue-js_logo-svg.png" width="40" height="40">
    </a>
    <div>
      <img :src="$auth.user.picture" width="30" height="30">
      <span class="text-muted font-weight-light px-2">{{$auth.name}}</span>
      <button type="button" class="btn btn-outline-secondary btn-sm" @click="$auth.logout()">Logout</button>
    </div>
  </nav>
</template>

<script>
  export default {
      name: "navbar",
      mounted() {
          console.log(this.$router.params.auth)
      },
  }
</script>

我的回电：

<template>
  <div class="callback"></div>
</template>

<script>
    export default {
        name: 'callback',
        metaInfo: {
            title: 'Callback',
        },
        mounted() {
            // eslint-disable-next-line
            this.$auth.handleAuthentication().then((data) => {
                this.$router.push({ name: 'index' })
            })
        }
    }
</script>

问题是，在登录和重定向后，我的导航栏无法访问 $auth 对象。

控制台：

error: TypeError: Cannot read property 'picture' of null

main.js?1c90:18 error info: render

main.js?1c90:17 error: TypeError: Cannot read property 'name' of null

main.js?1c90:18 error info: render

如果我直接访问 /home 它工作正常。

我不是真正的 JS 开发人员，这个 ES6 的东西也可能是阿拉伯语，你们中的任何 vue 专家都指出了我正确的方向吗？

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

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

我已经尝试将服务导入我的 Navbar 组件（尽管这让我很生气）

我尝试了不同的重定向、重新验证、使用 mounted() 和 data() 在导航栏组件中重新路由它。

我确定这很简单，但我把头发扯掉了，因为正如我所说，此刻对我来说完全陌生。

Answer 1

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

https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication#setup-auth0--vuejs-auth-plugin

Answer 2

我也跟着教程做了，也遇到了同样的问题。

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

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

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

navbar.vue

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 中路由后未定义的 auth0 变量

Undefined auth0 variables after routing in Vue

javascript

vue.js

auth0

vue-router

vuejs2