Неопределенные переменные auth0 после маршрутизации в Vue - PullRequest
Новая
       22

Неопределенные переменные auth0 после маршрутизации в Vue

0 голосов
/ 05 июня 2018

Я пытаюсь добавить 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>

Мой Navbar: 

<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.

console: 

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 может быть и на арабском, кто-нибудь из вас, экспертов, указывает мне правильное направление?

Я пыталсяПередача переменных из компонента следующим образом: 

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

Я пытался импортировать сервис в мой компонент Navbar (хотя это меня радует)

Я пробовал разные перенаправления, повторную аутентификацию, перемонтируя его в компоненте navbar с mount () и data ().

Я уверен, что это что-то простое, но я вырываю волосы, потому что, как я сказал, это совершенно чуждо мне в данный момент.

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

Я также следовал руководству и имел ту же проблему.

Поскольку компонент navbar находится в моем App.vue, а не в моем домашнем компоненте, я обнаружил, что панель инструментов визуализировалась до того, как для ответа от auth0 было установлено значение localStorage (следовательно, почему работало обновление при второй загрузке),Перемещение компонента navbar внутри домашнего компонента устранило проблему, но это не было для меня идеальным.

Я использовал подход шины событий, как рекомендовано аналогичным вопросом переполнения стека -

Повторно отобразить панель навигации после входа в систему vuejs

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

},

Не самое чистое решение, но оно сработало для меня.

0 голосов
/ 05 июня 2018

Объект this.$auth предоставляется пользовательским плагином от Auth0, в руководстве вы можете прочитать, как установить и использовать его:

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

...