一、路由鉴权在本项目中的实现说明
1. 路由鉴权的作用与项目应用场景
路由鉴权（Route Guard）用于控制用户访问权限，防止未登录或无权限用户访问受限页面。在本项目（如 web-admin、web-company），路由鉴权主要用于后台管理系统和前台用户中心等页面，保护敏感数据和操作。
2. 项目中的路由鉴权实现
以 web-company 为例，src/router/guard.ts 实现了路由守卫：
// web-company/src/router/guard.ts
import router from './index'
import { getToken } from '@/utils/token'
router.beforeEach((to, from, next) => {
const token = getToken()
if (to.meta.requiresAuth && !token) {
// 未登录，跳转到登录页
next({ path: '/login', query: { redirect: to.fullPath } })
} else {
next()
}
})
在路由配置中设置 meta 字段：
// web-company/src/router/index.ts
{
path: '/profile',
component: () => import('@/views/Profile.vue'),
meta: { requiresAuth: true }
}
二、问题
1. 问：你在项目中是如何实现路由鉴权的？为什么要做路由鉴权？
答：
在本项目（如 web-company），我在 src/router/guard.ts 里通过 Vue Router 的 beforeEach 守卫实现路由鉴权。每次路由跳转时，判断目标路由是否需要登录（meta.requiresAuth），如果未登录则重定向到登录页。这样可以防止未授权用户访问敏感页面，保护用户数据安全。
2. 问：路由鉴权和接口鉴权有什么区别？项目中如何配合使用？
答：
路由鉴权是在前端控制页面访问，提升用户体验，但不能完全防止非法访问；接口鉴权是在后端校验 token 或权限，保证数据安全。项目中两者结合使用：前端路由守卫拦截未登录用户，后端接口也会校验 token，双重保障安全。
3. 问：如何在项目中实现登录后自动跳转回原页面？
答：
在路由守卫中，未登录时将当前目标路由通过 query 参数 redirect 传递到登录页。登录成功后，读取 redirect 参数并跳转回原页面。项目中登录页有如下逻辑：
const redirect = route.query.redirect || '/'
router.push(redirect as string)
4. 问：如何在项目中实现不同角色的权限控制？
答：
可以在路由 meta 字段中增加角色信息，如 meta: { roles: ['admin'] }，在路由守卫中判断当前用户角色是否有权限访问目标路由。项目中后台管理系统可根据用户角色动态生成菜单和路由，防止普通用户访问管理员页面。
5. 问：你在项目中遇到过哪些路由鉴权相关的问题？如何解决的？
答：
曾遇到 token 失效但前端未及时跳转登录页的问题。为此，项目中在接口响应拦截器里统一处理 401 错误，清除本地 token 并跳转登录页，保证用户状态一致性。此外，注意防止路由死循环和多次重定向问题，提升了用户体验。
