受保护路由的逻辑流程与实现：如何避免组件重复校验access token？

核心问题解答：是否需要每次路由访问都请求服务端校验token？ #

不需要，分层校验是行业通用的最优策略：

• 前端路由层只做本地快速校验（比如判断token是否存在、本地存储的过期时间是否到期，JWT可直接解析payload里的exp字段判断），用于拦截明显的非法访问，减少无效请求
• 所有业务接口的校验逻辑必须由后端实现，前端的鉴权逻辑本身无法防篡改，没有必要在路由切换时单独发请求做校验，等实际接口请求时后端统一校验即可，如果返回401状态码再统一处理跳转登录。

冗余鉴权逻辑的优化方案 #

你当前在每个业务组件内写鉴权判断的方式会导致逻辑散落在各处，后续修改鉴权规则需要改动所有组件，维护成本极高，推荐按以下优先级选择优化方案：

1. 路由层全局守卫（SPA应用首选，完全不用侵入业务组件） #

直接在路由配置层统一封装鉴权拦截逻辑，所有需要鉴权的路由都挂载在统一的鉴权路由下，业务组件不需要做任何修改。
以React Router v6为例：

// 封装公共鉴权路由组件
import { Navigate, Outlet } from 'react-router-dom'

const ProtectedRoute = () => {
  // 统一的本地鉴权逻辑：判断token是否存在、是否过期
  const hasValidToken = !!localStorage.getItem('access_token')
  return hasValidToken ? <Outlet /> : <Navigate to="/login" replace />
}

// 路由配置时统一分组
const router = createBrowserRouter([
  { path: '/login', element: <LoginComponent /> },
  // 所有需要鉴权的路由都作为ProtectedRoute的子路由
  {
    element: <ProtectedRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      // 其他需要鉴权的路由全部放在此处
    ]
  }
])

2. 自定义Hook/高阶组件封装（适合局部鉴权场景） #

如果存在非路由级的组件需要鉴权，可以把公共逻辑封装成可复用的工具，避免重复编码：

自定义Hook示例：

// 全局封装统一鉴权Hook
const useAuth = () => {
  const hasValidToken = !!localStorage.getItem('access_token')
  if (!hasValidToken) {
    window.location.href = '/login'
  }
  return hasValidToken
}

// 业务组件使用，只需要一行代码
const ComponentName = () => {
  useAuth()
  // 直接编写业务逻辑即可，不需要再写判断跳转
}

高阶组件示例：

const withAuth = (Component) => {
  return (props) => {
    const hasValidToken = !!localStorage.getItem('access_token')
    if (!hasValidToken) return <LoginComponent />
    return <Component {...props} />
  }
}

// 业务组件导出时包裹一层即可
export default withAuth(ComponentName)

3. 全局请求拦截器兜底 #

除了路由层的前置拦截，还要在请求工具的全局拦截器里做兜底处理，避免前端本地校验漏判的情况：

import axios from 'axios'

// 请求拦截器统一给所有接口加token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器统一处理token失效场景
axios.interceptors.response.use(
  response => response,
  error => {
    // 后端返回401代表token无效/过期，统一清缓存跳登录
    if (error.response?.status === 401) {
      localStorage.removeItem('access_token')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

最佳实践总结 #

• 鉴权逻辑统一收敛：所有和鉴权相关的逻辑只放在路由守卫、公共Hook、请求拦截器三个位置，不要散落在业务组件中，后续修改规则只需要调整一处即可
• 安全兜底：永远不要依赖前端的鉴权逻辑做安全保障，所有敏感接口后端必须做token有效性校验
• 体验优化：可以搭配refresh token实现token无感刷新，避免用户操作中途过期跳登录的情况

内容的提问来源于stack exchange，提问作者crazycoder