我第一次使用vue cli创建了一个应用程序,并开始使用vue路由器。我创建了一些路由,可以访问基于身份状态-登录,家庭等。
这就是发生在我的应用程序-
>
如果我尝试在登录之前从浏览器的URL栏/搜索栏访问这些路由,我会被重定向到登录路由,这很好,也很好用。
当我登录应用程序时,我可以通过单击应用程序中的按钮轻松访问嵌套路由,这也很好。
但是当我试着-
a、 刷新页面,我从应用程序中获取日志
b、 从url访问嵌套路由,我将从应用程序注销
这是我在Vuex商店的actions.js
const actions = {
checkAdmin() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
router.push('/home');
} else {
router.push('/');
}
});
},
login(context) {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((res) => {
context.dispatch('setAdmin', res.user);
context.dispatch('setAuthState', true);
router.push('/home');
}).catch((err) => {
console.log('err:', err);
});
},
signout(context) {
firebase.auth().signOut().then(() => {
context.dispatch('setAdmin', null);
router.push('/');
}, function (error) {
console.error('Sign Out Error', error);
});
},
setAdmin(context, payload) {
context.commit('setAdmin', payload);
},
setTheme(context, payload) {
context.commit('setTheme', payload);
},
setVizType(context, payload) {
context.commit('setVizType', payload);
},
fetchUsersList(context, payload) {
context.commit('setUserList', payload.length > 0 ? payload : ['user 1', 'user 2', 'user 3', 'user 4', 'user 5']);
},
setSelectedUser(context, payload) {
context.commit('setSelectedUser', payload);
context.commit('setSessionList', [payload + ' session 1', payload + ' session 2', payload + ' session 3', payload + ' session 4']);
},
fetchSessionList(context, payload) {
context.commit('setSessionList', payload);
},
setSelectedSession(context, payload) {
context.commit('setSession', payload);
}
};
这是我的路由器文件
const routes = [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
beforeEnter: (to, from, next) => {
console.log("beforeEnter", store.state.authenticated);
if (store.state.authenticated) {
console.log("Home");
next();
} else {
next("/");
console.log("Login");
}
},
children: [{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
}, {
path: 'settings',
name: 'Settings',
component: Settings
}]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我已通过修改登录名解决了此问题。vue组件。似乎当登录组件加载时,它不会检查用户是否已经登录。为此,我从Login中定义的方法中分派checkAdmin。安装时使用vue。
这样,每次用户刷新页面或转到默认url时,我都可以检查用户是否已登录并更新管理员状态。
我希望这个答案能帮助在vuex商店内执行所有firebase操作并遇到相同问题的人。
我已经决定移动我的Firebase操作在vuex商店只是为了让我的应用程序更干净。