router.beforeEach是实现登录拦截最直接可靠的位置，它在每次路由跳转前自动执行，通过白名单放行、登录态双校验、meta.requiresAuth权限标记三步完成分层拦截，并支持重定向回原路径。
用 router.beforeEach 就能实现——它在每次跳转前自动执行，是做登录拦截最直接、最可靠的位置。
核心判断逻辑：三步走
实际拦截不是“一刀切”，而是分层校验：
-
先看是不是免登录页：比如
/login、/register、/404这类路由，直接放行，不检查登录态 - 再查有没有有效凭证：通常读取 localStorage 或 Cookie 中的 token，或结合 Vuex/Pinia 状态。注意别只依赖一个来源，建议双校验（如 token + isAuthenticated 标识）
-
最后看目标页是否需要权限：通过路由配置里的
meta.requiresAuth: true标记受保护页面，避免所有页面都走校验
关键代码写法（Vue 3 + Vue Router 4）
在 src/router/index.js 或 .ts 中配置：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
router.beforeEach((to, from, next) => {
// 1. 白名单放行
const publicPages = ['/login', '/register', '/forgot-password'];
if (publicPages.includes(to.path)) {
next();
return;
}
// 2. 检查登录态（示例：token 存在即视为已登录）
const token = localStorage.getItem('token');
if (token) {
next(); // 已登录，放行
} else {
// 未登录，重定向到登录页，并带上原目标路径
next({ path: '/login', query: { redirect: to.fullPath } });
}
});
登录页怎么接住跳转？
用户被重定向到 /login?redirect=/admin/user 后，登录成功时要主动跳回去：
立即学习“前端免费学习笔记（深入）”；
- 在登录组件中读取
this.$route.query.redirect（Vue 2）或useRoute().query.redirect（Vue 3 Composition API） - 登录成功后调用
router.push(redirect || '/') - 注意对 redirect 做基础校验（比如是否为合法路径），防跳转劫持
容易忽略但重要的细节
几个实战中常踩的坑：
- next 必须且只能调用一次：漏调会卡死导航；重复调用可能引发警告甚至异常
-
异步校验要等结果再 next：如果 token 需要解码或调接口验权，得用
await或 Promise.then，不能直接 next() -
第三方登录场景要优先处理：比如 URL 带
?token=xxx，应跳过常规登录检查，避免拦截回调流程 -
路由元信息要统一约定：推荐用
meta: { auth: 'user' }而非布尔值，方便后续扩展角色权限
