Vue.js 和 Firebase “用户”信息
Posted
技术标签:
【中文标题】Vue.js 和 Firebase “用户”信息【英文标题】:Vue.js & Firebase 'User' info 【发布时间】:2017-08-07 11:28:33 【问题描述】:我正在使用 Vue.js 和 Firebase 开发一个应用程序。
我已经设法使用电子邮件/密码登录,并且可以成功地将 firebase.auth() 用户信息存储在 state.currentUser 下的 Vue.js 状态中。
但是,根据 Firebase 指南,我将更多信息存储在“/users”引用下。例如。 /users/uid
我也想将这些数据提取到 vuex 存储中(state.userMeta),这样我就可以在站点周围使用它,但是刷新后它永远不会工作。如果我不刷新,注销然后重新登录,它会很好地填充状态。
任何帮助将不胜感激!
詹姆斯
auth.js
import auth, db from '@/config/database'
import store from '@/vuex/store'
const init = function init ()
auth.onAuthStateChanged((user) =>
if (user)
store.dispatch('setUser', user)
else
// User is signed out.
store.dispatch('setUser', null)
, (error) =>
console.log(error)
)
export init
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import db from '@/config/database'
Vue.use(Vuex)
const state =
currentUser: null,
userMeta: null
const mutations =
SET_USER (state, user)
if (user)
state.currentUser = user
db.ref('users/' + user.uid).on('value', function (s)
state.userMeta = s.val()
)
else
state.currentUser = null
state.userMeta = null
const actions =
setUser (commit, user)
commit('SET_USER', user)
const getters =
currentUser: state => state.currentUser
export default new Vuex.Store(
state,
mutations,
actions,
getters,
plugins: [createPersistedState()]
)
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import * as auth from '@/config/auth'
const initApp = function initApp ()
auth.init()
export default
name: 'app',
created: initApp
</script>
<style lang="scss" src="./assets/sass/style.scss"></style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueFire from 'vuefire'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueFire)
import store from '@/vuex/store'
/* eslint-disable no-new */
new Vue(
el: '#app',
router,
store,
template: '<App/>',
components: App
)
【问题讨论】:
【参考方案1】:Vuex 状态在页面刷新时被清除。
我用这个方法解决了这个问题
在 main.js 中
new Vue(
el: '#app',
router,
store,
created()
Firebase.auth().onAuthStateChanged((user) =>
if (user)
this.$store.state.user = this.$firebase.auth().currentUser
else
this.$store.state.user = null
)
,
render: h => h(App)
)
所以当有刷新时,你的状态会自动同步。
在您的组件中
computed:
user()
return this.$store.state.user
,
刷新后,尝试使用 this.$firebase.auth().currentUser
不起作用 - 但通过 Auth 更改再次设置状态似乎可以解决问题
【讨论】:
以上是关于Vue.js 和 Firebase “用户”信息的主要内容,如果未能解决你的问题,请参考以下文章
用户在 Vue.js 和 Firebase 中注册后更改导航栏的状态
如何删除用户点击按钮? - Firebase - Vue.js
如何在vue js项目中检测用户的firebase身份验证登录状态?