前端路由权限拦截实战：Vue 与 React 三种方案对比

React Router v6 实现： 使用自定义组件包装路由。

// components/AuthRoute.jsx
import { Navigate, useLocation } from 'react-router-dom'
import { getToken } from '../utils/auth'

const AuthRoute = ({ children }) => {
  const location = useLocation()
  const hasToken = getToken()
  if (!hasToken) {
    return <Navigate to="/login" state={{ from: location }} replace />
  }
  return children
}

export default AuthRoute

方案二：路由元信息（Meta）配置流

适合需要区分公开页面和敏感页面的场景。通过 meta 字段配置权限要求。

Vue Router 实现：

// router/routes.js
export const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home/index.vue'),
    meta: { title: '首页', requiresAuth: false }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('@/views/admin/index.vue'),
    meta: { title: '管理后台', requiresAuth: true, requiredRoles: ['admin'] }
  }
]

// router/index.js
router.beforeEach(async (to, from, next) => {
  document.title = to.meta.title || '默认标题'
  const hasToken = getToken()
  
  if (!to.meta.requiresAuth) {
    next()
    return
  }
  
  if (!hasToken) {
    next(`/login?redirect=${to.path}`)
    return
  }
  
  if (to.meta.requiredRoles) {
    const userInfo = getUserInfo()
    const hasRole = to.meta.requiredRoles.some(role => userInfo.roles.includes(role))
    if (!hasRole) {
      next('/403')
      return
    }
  }
  next()
})

方案三：高阶组件（HOC）包装术

适合 React 项目，将权限逻辑抽离，符合组合优于继承的理念。

// hocs/withAuth.jsx
import { Component } from 'react'
import { Navigate } from 'react-router-dom'
import { getToken, getUserInfo } from '../utils/auth'

const withAuth = (options = {}) => (WrappedComponent) => {
  return class AuthComponent extends Component {
    render() {
      const hasToken = getToken()
      if (!hasToken) {
        return <Navigate to="/login" replace />
      }
      if (options.requiredRoles) {
        const userInfo = getUserInfo()
        const hasRole = options.requiredRoles.some(role => userInfo?.roles?.includes(role))
        if (!hasRole) {
          return <div>403 Forbidden</div>
        }
      }
      return <WrappedComponent {...this.props} userInfo={userInfo} />
    }
  }
}

export default withAuth

优缺点分析

优点：

• 用户体验好，避免加载一半再报错。
• 安全性提升，增加攻击者信息收集成本。

缺点：

• 动态菜单生成复杂，涉及异步获取权限信息时的路由刷新问题。
• 微前端场景下权限校验协调困难。
• 死循环陷阱：守卫跳转登录页时需排除登录路径。

生产环境实践

Token 过期无感刷新

采用双 Token 机制（Access Token + Refresh Token）。通过 Axios 拦截器处理 401 响应，利用队列阻塞并发请求，等待刷新完成后重试。

动态路由表生成

从后端拉取菜单配置，前端动态挂载路由。注意 router.addRoute 是 Vue 3 API，Vue 2 为 addRoutes。刷新页面后需重新添加路由或持久化配置。

按钮级权限控制

除路由拦截外，需控制页面元素。Vue 可使用指令 v-permission，React 可使用 Hook 判断权限后条件渲染。

多租户系统隔离

在路由守卫中校验 URL 中的租户 ID 是否与当前用户一致，防止越权访问其他租户数据。

问题排查思路

1. Network 检查：确认请求头是否携带 Authorization Token。
2. Meta 配置检查：核对 requiresAuth 等字段拼写是否正确。
3. 异步时机：确保用户信息获取完成后再执行后续接口请求。
4. 清理缓存：强制刷新或清除 Service Worker 缓存。

最佳实践建议

• 拦截器与守卫共享认证状态。
• 考虑降级策略，当权限服务挂掉时决定放行还是拒绝。
• 避免过度设计，小项目无需复杂的 RBAC 平台。

结语

权限保护旨在保障数据安全与合规。合理的前端路由拦截能显著提升系统安全性与用户体验。开发者应根据项目规模选择合适的方案，并注意处理 Token 刷新、动态路由及多租户等常见场景。