javascript - 在Vue中路由后未定义的auth0变量
问题描述
我正试图在他度假时将 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');
我的应用程序.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>
我尝试将服务导入我的导航栏组件(尽管这让我很恼火)
我尝试了不同的重定向,重新验证,在导航栏组件中使用mounted() 和data() 重新安装它。
我确定它很简单,但我把头发扯掉了,因为正如我所说,它现在对我来说完全陌生。
解决方案
我也遵循了教程并遇到了同样的问题。
由于导航栏组件在我的 App.vue 而不是我的主组件中,我发现工具栏在来自 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')
}
}
导航栏.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
}
}
},
不是最干净的解决方案,但它对我有用。
推荐阅读
- django - 比较 Django 模型字段和 HTML 中的 request.user.username
- python - 从不同文件中的同一类访问函数
- javascript - fs.readFileSync 不是函数?
- gsl - GSL 上的自适应显式二阶龙格库塔方法
- apache-kafka - Confluent Kafka 复制器 | 消费者组偏移量未复制到目标集群
- python - ValueError: Expect x to be a 1-D sorted array_like.我试图绘制平滑曲线但不能
- java - 获取 java.io.IOException: Is a directory: on running a web app with jboss server on linux OS
- nginx - 无法加载资源:Angular-NodeJS 应用程序上的 net::ERR_CONNECTION_REFUSED 错误
- c# - C#,具有高权限的任务计划程序
- lua - LUVIT DISCORDIA如何获得公会的ID