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

Question

我第一次使用 vue-cli 创建了一个应用程序，并开始使用 vue 路由器。我创建了一些可以根据身份验证状态访问的路由 - 登录、家庭等。

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

1. 如果我在登录之前尝试访问路由，从浏览器中的 URL 栏/搜索栏，我会被重定向到登录路由，这很棒并且工作正常。

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

3. 但是当我尝试 -

   一个。刷新页面，我从应用程序中退出了

   b.从 url 访问嵌套路由，我从应用程序中注销

这是我的 actions.js 用于 vuex 商店

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

Answer 1

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

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

我希望这个答案可以帮助在 vuex 商店内进行所有 firebase 操作并遇到同样问题的人。

我决定将我的 firebase 操作移到 vuex 商店，只是为了让我的应用更干净。