Vue开发求助：无法从Vue Router访问Vuex Getters及配置路由守卫

我来帮你排查这两个问题，咱们一步步来：

问题1：Vuex Getters 返回嵌套函数无法取值 #

你在路由里用mapGetters的方式不对哦！mapGetters是专门给Vue组件用的语法糖，它返回的是需要绑定到Vue实例的计算属性函数，在路由这种非组件环境里直接解构使用，拿到的就是未执行的函数，自然没法直接获取值。

解决方法：
直接导入你的Vuex Store实例，然后通过命名空间的方式访问getter：

1. 取消注释import store from '../store';这行代码；
2. 在路由守卫里直接用store.getters['auth/isAuthenticated']来获取登录状态，同理其他getter比如store.getters['auth/authStatus']。

问题2：路由守卫配置错误 #

你的路由守卫里有几个明显的逻辑问题：

• 路径拼写错误：你配置的登录路由是/sign-in，但跳转时写的是/signIn（大小写和路径不匹配）；
• 重复调用next()：在if (to.matched.some(...))的代码块里，不管用户是否登录，最后都会执行额外的next({ path: '/signIn', ... })，这会导致即使登录成功也被强制跳转到登录页；
• 冗余代码：to; from;这两行代码完全没用，可以直接删掉。

修改后的路由守卫代码：

router.beforeEach((to, from, next) => {
  // 直接通过store访问命名空间的getter
  const isUserLoggedIn = store.getters['auth/isAuthenticated'];
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (isUserLoggedIn) {
      console.log('user is authenticated');
      return next(); // 已登录，直接放行
    } else {
      console.log('Access denied!');
      // 跳转到正确的登录路由，注意路径是/sign-in
      next({ path: '/sign-in', query: { redirect: to.fullPath } });
    }
  } else {
    next(); // 不需要登录的页面直接放行
  }
})

额外优化建议 #

• 可以在Vuex的auth模块初始化时，从localStorage读取token，避免页面刷新后登录状态丢失：

  // auth模块的state修改
  state: {
    token: localStorage.getItem('auth-token') || null,
    authStatus: !!localStorage.getItem('auth-token')
  },
  

• 路由守卫里可以添加加载状态或者友好的错误提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Valary o