Vue.js未登录用户访问应用时如何重定向？路由守卫问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是路由守卫注册时机太晚——你把beforeEach放在了App.vue的created钩子里面，这意味着只有当App组件初始化完成后，守卫才会被挂载到路由上。但用户直接输入URL访问时，路由的解析流程是在App组件创建之前就完成的，这时候你的守卫还没生效，自然就拦不住未登录的请求了。

正确的解决方案：把全局路由守卫移到路由配置文件里 #

全局路由守卫应该在路由实例初始化的时候就注册，而不是等到组件创建。一般我们会把路由配置放在单独的文件里（比如router/index.js），直接在这里注册守卫就可以了。

具体步骤和代码示例： #

1. 打开你的路由配置文件（通常是src/router/index.js），引入你的Vuex store（如果用了Vuex管理登录状态）。
2. 在路由实例创建完成后，注册beforeEach守卫：

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store'; // 引入你的状态管理store

Vue.use(VueRouter);

// 定义你的路由列表
const routes = [
  { 
    path: '/login', 
    name: 'Login', 
    component: () => import('../views/Login.vue') 
  },
  { 
    path: '/users', 
    name: 'Users', 
    component: () => import('../views/Users.vue'),
    meta: { requiresAuth: true } // 标记这个页面需要登录才能访问
  },
  // 其他路由配置...
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

// 全局前置守卫——在这里注册！
router.beforeEach((to, from, next) => {
  // 检查当前路由是否需要登录权限
  const needsAuth = to.matched.some(page => page.meta.requiresAuth);
  // 从store获取登录状态
  const isLoggedIn = store.getters.isLogado;

  if (needsAuth && !isLoggedIn) {
    // 未登录且访问需要授权的页面，重定向到登录页
    next('/login');
  } else if (!needsAuth && isLoggedIn) {
    // 已登录但访问登录页，可以重定向到首页（可选，根据你的业务需求调整）
    next('/');
  } else {
    // 其他情况正常放行
    next();
  }
});

export default router;

3. 最后别忘了删除App.vue里那段created钩子中的守卫代码，避免重复注册导致的冲突。

为什么这样能解决问题？ #

当你把守卫直接注册在路由实例上时，路由在初始化阶段就会加载这个守卫，不管用户是直接输入URL访问，还是通过应用内部导航跳转，所有路由跳转都会先经过这个守卫的判断，完美解决你之前遇到的直接访问URL不拦截的问题。

另外，用meta.requiresAuth来标记需要登录的页面，比全局拦截所有页面更灵活——比如登录页、首页这类不需要登录的页面，就不会被拦截，符合实际业务场景。

内容的提问来源于stack exchange，提问作者Fabio Ebner