firebase - Firebase Auth 检查与 Vue-router
问题描述
问题是 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”
解决方案
在您的 auth.js 文件中而不是监视商店,您应该等待authStateChanged
事件,然后当您从 firebase 收到用户时进行处理。
auth.js
export default (to, from, next) => {
firebase.auth().onAuthStateChanged(function (user) {
if (user)
next();
else
next('/signin');
});
}
推荐阅读
- c# - 我可以在 C# 中模板化 Func 吗?
- javascript - Prev/Next 循环遍历 li 类处于活动状态的列表
- python - 使用 pytube 和 tkinter 在画布中显示 youtube 视频的缩略图
- purescript - 为什么将 try 与 affjax 的 XHRError 结合使用会导致错误类型不匹配?
- swift - Placenote Swift - 加载同一张地图后位置错误
- android - 单个 ImageButton 上的多个可绘制对象
- python - 展开多列
- kubernetes - Kops 和 Terraform k8s 集群重新创建
- android - 检查用户是否首次通过 Android 中的 Firebase 手机身份验证进行身份验证
- java - 警告:指定的 SHA1 算法和 SHA1withRSA 算法将在以后的更新中禁用