从搜索栏中手动访问路线时，Vue Routes注销应用程序

问题描述

我第一次使用vue-cli创建了一个应用程序，并开始与其一起使用vue路由器。我已经创建了一些基于身份验证状态可以访问的路由-登录名，家庭等。

这就是我的应用程序中发生的事情-

1. 如果我尝试在登录之前访问路由，则从浏览器的URL栏/搜索栏，我将被重定向到很棒的登录路由，并且效果很好。

2. 当我登录应用程序时，我可以通过单击应用程序中本地路线上的按钮轻松访问嵌套路线，这也很好。

3. 但是当我尝试-

   a。刷新页面，我从应用程序中退出登录

   b。从网址访问嵌套路由，我从应用程序注销

这是我的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',setVizType(context,payload) {
    context.commit('setVizType',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',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

解决方法

我已经通过修改Login.vue组件解决了这个问题。似乎在加载登录组件时，它不会检查用户是否已登录。为此，我在挂载时从Login.vue中定义的方法调度checkAdmin。

这样，我可以在每次用户刷新页面或转到默认URL时检查用户是否已登录并更新管理员状态。

我希望这个答案可以帮助在vuex存储中执行所有firebase操作并遇到相同问题的人。

我决定将自己的firebase操作移至vuex商店中，只是为了使我的应用程序更干净。