前端路由拦截的核心是通过在路由跳转前后进行权限判断，决定用户是否能访问特定页面。常见实现方式包括：1. 全局路由守卫（如 vue 的 beforeeach 或 react 的 usenavigate 钩子），集中管理权限并控制跳转；2. 组件级别权限控制（如 react 的 hoc），灵活控制单个组件的访问权限；3. 服务端渲染（ssr）时在服务器校验权限，提高安全性但增加复杂度；4. 使用路由配置中的 meta 字段存储权限信息，在全局守卫中统一校验；5. 动态路由，根据用户权限动态生成路由表以实现精细化控制。spa 中推荐使用全局路由守卫和组件级控制相结合的方式，并注意处理异步权限验证及避免重定向死循环问题。
前端路由拦截，简单来说，就是控制用户能否访问特定页面。实现方式多种多样，核心在于在路由跳转前后进行判断，决定是否允许跳转。
解决方案
前端路由拦截的本质是在路由跳转前后进行权限判断。常见的实现方案包括：
立即学习“前端免费学习笔记（深入）”；
-
全局路由守卫 (vue router / React Router): 这是最常用的方法。在路由跳转前，通过 beforeEach (Vue) 或 useNavigate (React) 钩子，检查用户权限。如果权限不足，可以重定向到登录页或其他授权页面。这种方式集中管理路由权限，方便维护。
- Vue Router 示例:
router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const isLoggedIn = localStorage.getItem('token'); // 假设使用 token 验证 if (requiresAuth && !isLoggedIn) { next('/login'); // 重定向到登录页 } else { next(); // 允许跳转 } });- React Router 示例 (使用 useNavigate 钩子):
import { useNavigate, useLocation } from 'react-router-dom'; import { useEffect } from 'react'; function AuthGuard({ children, requiredRoles }) { const navigate = useNavigate(); const location = useLocation(); const isLoggedIn = localStorage.getItem('token'); // 假设使用 token 验证 const userRole = localStorage.getItem('role'); // 假设存储用户角色 useEffect(() => { if (!isLoggedIn) { navigate('/login', { replace: true, state: { from: location } }); // 保存当前 location，登录后跳转回来 } else if (requiredRoles && !requiredRoles.includes(userRole)) { navigate('/unauthorized'); // 重定向到无权限页面 } }, [isLoggedIn, navigate, location, requiredRoles, userRole]); return children; } export default AuthGuard; -
组件级别权限控制 (Higher-Order Components – HOC): 通过高阶组件包裹需要权限控制的组件，在组件渲染前进行权限判断。这种方式更灵活，可以针对单个组件进行权限控制。
// React 示例 function withAuth(WrappedComponent, requiredRole) { return function(props) { const isLoggedIn = localStorage.getItem('token'); const userRole = localStorage.getItem('role'); if (!isLoggedIn || (requiredRole && userRole !== requiredRole)) { return <div>您没有权限访问此页面</div>; // 可以重定向到其他页面 } return <WrappedComponent {...props} />; }; } // 使用 const AdminDashboard = withAuth(Dashboard, 'admin'); // 只有 admin 角色才能访问 -
服务端渲染 (SSR) 时的权限控制: 在服务端进行权限判断，只有拥有权限的用户才能获取到页面内容。这种方式安全性更高，但实现复杂度也更高。
- 例如，在 Next.JS 中，可以在 getServerSideProps 函数中进行权限校验。
export async function getServerSideProps(context) { const { req, res } = context; const token = req.cookies.token; // 从 cookie 中获取 token if (!token) { return { redirect: { destination: '/login', permanent: false, }, }; } // 校验 token，获取用户信息 try { const user = await verifyToken(token); // 假设 verifyToken 是一个校验 token 的函数 return { props: { user }, }; } catch (error) { return { redirect: { destination: '/login', permanent: false, }, }; } } function MyPage({ user }) { // ... } export default MyPage; -
路由配置中的 Meta 字段: 在路由配置中添加 meta 字段，用于存储权限信息。然后在全局路由守卫中读取 meta 字段，进行权限判断。这种方式可以更清晰地管理路由权限。
// Vue Router 示例 const routes = [ { path: '/admin', component: AdminDashboard, meta: { requiresAuth: true, role: 'admin' }, }, // ... ]; router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { const isLoggedIn = localStorage.getItem('token'); const userRole = localStorage.getItem('role'); if (!isLoggedIn) { next('/login'); } else if (to.meta.role && userRole !== to.meta.role) { next('/unauthorized'); } else { next(); } } else { next(); } }); -
动态路由: 根据用户的权限动态生成路由表。这种方式可以更精细地控制用户的访问权限，但实现复杂度较高。
- 例如，在用户登录后，从服务器获取用户拥有的权限列表，然后根据权限列表动态生成路由表。
单页面应用（SPA）路由拦截的最佳实践是什么？
SPA 的路由拦截核心在于客户端，因此全局路由守卫和组件级别权限控制是常用的选择。全局路由守卫集中管理，易于维护；组件级别权限控制更灵活，适合复杂场景。选择哪种方式取决于项目的具体需求和复杂度。SSR 也是一种选择，但会增加项目的复杂度。
如何处理异步权限验证？
权限验证往往需要从服务器获取用户信息，这是一个异步过程。在全局路由守卫中，可以使用 async/await 或 promise 来处理异步权限验证。
// Vue Router 示例 router.beforeEach(async (to, from, next) => { if (to.meta.requiresAuth) { const isLoggedIn = localStorage.getItem('token'); if (!isLoggedIn) { next('/login'); return; } try { // 假设 getUserInfo 是一个异步函数，用于从服务器获取用户信息 const user = await getUserInfo(); // 将用户信息存储到 Vuex 或其他状态管理工具中 store.commit('setUser', user); next(); } catch (error) { // 处理错误，例如 token 过期 localStorage.removeItem('token'); next('/login'); } } else { next(); } });
如何避免路由拦截的死循环？
路由拦截的死循环通常发生在重定向到登录页时，登录页又需要登录才能访问。为了避免这种情况，可以在路由守卫中判断当前是否已经位于登录页，如果是，则直接放行。
// Vue Router 示例 router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); // 如果已经在登录页，则直接放行 return; } if (to.meta.requiresAuth) { const isLoggedIn = localStorage.getItem('token'); if (!isLoggedIn) { next('/login'); } else { next(); } } else { next(); } });
