一、路由鉴权的核心目标
- 拦截未登录用户：阻止未登录用户访问需要登录的页面（如个人中心、订单页），强制跳转至登录页。
- 限制权限不足用户：即使已登录，若用户角色/权限不满足路由要求（如普通用户访问管理员页面），则拒绝访问（跳转至403页或首页）。
二、与“Pinia存储用户状态”“动态路由”的关系
三者是递进协作的关系：
- Pinia存储用户状态：提供鉴权的“数据源”（用户是否登录、拥有哪些权限）。
- 动态路由按需加载：提前过滤出用户“理论上可访问”的路由表（减少无权限路由的暴露）。
- 路由鉴权：在用户实际访问路由时，再次验证权限（最终安全关卡）。
三、常见实现方式（以Vue Router为例）
通过导航守卫（导航钩子） 在路由跳转前执行鉴权逻辑：
// router/index.js
import { useUserStore } from '@/stores/user';
const router = createRouter({ ... });
// 全局前置守卫：路由跳转前鉴权
router.beforeEach((to, from, next) => {
const userStore = useUserStore(); // 获取Pinia中的用户状态
// 1. 未登录用户访问需登录的页面
if (to.meta.requiresAuth && !userStore.isLogin) {
return next('/login?redirect=' + to.path); // 跳转登录页，并记录目标路径
}
// 2. 已登录用户访问权限不足的页面
if (to.meta.requiredRole && !userStore.roles.includes(to.meta.requiredRole)) {
return next('/403'); // 跳转403页面
}
// 3. 鉴权通过，允许跳转
next();
});
其中，to.meta中的requiresAuth（是否需要登录）、requiredRole（所需角色）是路由配置中定义的鉴权规则。
四、为什么需要路由鉴权？
- 弥补动态路由的不足：动态路由仅控制“路由是否存在于路由表中”，但用户仍可能通过手动输入URL访问未加载的路由，路由鉴权可拦截此类操作。
- 应对权限动态变化：若用户权限在会话中发生变更（如被降级），路由鉴权能实时生效，无需刷新页面。
- 前端安全加固：减少对后端鉴权的完全依赖，提升用户体验（避免无效请求后才跳转错误页）。
总结
路由鉴权是用户访问路由的“守门人”，它以Pinia存储的用户状态为依据，在动态路由的基础上，通过导航守卫实现“访问前验证”，最终确保用户只能访问其有权限的页面。在实际项目中，它与后端接口鉴权（如JWT验证）结合，形成“前端防误触、后端保安全”的完整权限体系。
