Firebase Auth 检查与 Vue-router
Posted
技术标签:
【中文标题】Firebase Auth 检查与 Vue-router【英文标题】:Firebase Auth check with Vue-router 【发布时间】:2019-01-21 03:22:57 【问题描述】:问题是 vue-router 的 beforeEnter 比 main.js 中的 beforeCreate 钩子更早触发并且有第二个延迟,而在重新加载后 vuex 操作将用户设置为状态。这会导致用户被退回到登录页面。
如何延迟 vue-router 的 beforeEnter 检查,直到 vuex 将授权用户设置为状态。
路由器.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import auth from './auth'
Vue.use(Router)
export default new Router(
mode: 'history',
routes: [
path: '/',
name: 'home',
component: Home
,
path: '/reservations',
name: 'Reservations',
component: () => import('@/views/Reservation/Reservations.vue'),
beforeEnter: auth
]
)
auth.js
import store from "../store";
export default (to, from, next) =>
if(store.getters.user)
next()
else
console.log('auth')
next('/signin')
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import firebase from 'firebase/app'
import 'firebase/app'
import config from './config'
new Vue(
router,
store,
render: h => h(App),
beforeCreate()
firebase.initializeApp(config).firestore().settings(timestampsInSnapshots: true)
console.log('main')
this.$store.dispatch('authCheck')
).$mount('#app')
存储/user.js
import firebase from 'firebase/app'
import 'firebase/auth'
export default
state:
user: null
,
mutations:
setUser (state, payload)
state.user = payload
,
actions:
authCheck( commit )
commit('setLoading', true)
firebase.auth().onAuthStateChanged((user) =>
if(user)
commit('setUser',
id: user.uid,
name: user.displayName,
email: user.email
)
commit('setLoading', false)
)
,
logout(commit)
firebase.auth().signOut()
commit('setUser', null)
,
getters:
user (state)
return state.user
在控制台中,我首先看到 beforeEnter 检查中的“auth”,然后是 beforeCreate 中的“main”。如何在路由器检查之前触发“authCheck”
【问题讨论】:
您可以尝试使用诸如 onauthstatechange 或 currentuser 之类的 Firebase 函数来获取用户实例,而无需使用 Vuex。 【参考方案1】:在您的 auth.js 文件中,而不是监控商店,您应该等待 authStateChanged
事件,然后当您从 firebase 收到用户时进行处理。
auth.js
export default (to, from, next) =>
firebase.auth().onAuthStateChanged(function (user)
if (user)
next();
else
next('/signin');
);
【讨论】:
以上是关于Firebase Auth 检查与 Vue-router的主要内容,如果未能解决你的问题,请参考以下文章
检查用户是否已登录Flutter&firebase auth |
在 Flutter App 的 Firebase Auth 中检查电子邮件是不是已存在
Firebase Auth 和 Swift:检查电子邮件是不是已在数据库中
如何在 Firebase Auth 中检查用户是不是通过 Facebook 登录 [重复]