提问者:小点点

从搜索栏手动访问路由时,Vue路由注销应用


我第一次使用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
    

  • 共1个答案

    匿名用户

    我已通过修改登录名解决了此问题。vue组件。似乎当登录组件加载时,它不会检查用户是否已经登录。为此,我从Login中定义的方法中分派checkAdmin。安装时使用vue。

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

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

    我已经决定移动我的Firebase操作在vuex商店只是为了让我的应用程序更干净。