ReactJS对接REST API实现授权token校验的实现方案咨询

1. 封装通用token校验工具 #

先实现基础的校验逻辑，对接你提供的/validate接口，本地没有token时直接返回无效：

// /src/utils/auth.js
export const validateToken = async () => {
  const token = localStorage.getItem('auth_token')
  if (!token) return false
  try {
    const res = await fetch('/api/validate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token })
    })
    // 校验通过返回true，同时服务端自动重置token有效期，符合你的规则
    return res.ok
  } catch (err) {
    return false
  }
}

2. 封装私有路由组件（适配react-router v6主流版本） #

把需要登录权限的页面统一用该组件包裹，每次路由切换时自动触发校验：

// /src/components/PrivateRoute.jsx
import { Navigate, Outlet, useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { validateToken } from '../utils/auth'

const PrivateRoute = () => {
  const [isValid, setIsValid] = useState(null)
  const location = useLocation()

  useEffect(() => {
    const checkAuth = async () => {
      const valid = await validateToken()
      setIsValid(valid)
      if (!valid) localStorage.removeItem('auth_token')
    }
    checkAuth()
  }, [location.pathname]) // 路由路径变化时自动重新校验

  // 校验过程中显示加载态，避免页面内容闪烁
  if (isValid === null) return <div>权限校验中...</div>

  // 校验通过渲染子页面，否则跳转到登录页
  return isValid ? <Outlet /> : <Navigate to="/login" replace />
}

export default PrivateRoute

3. 路由配置中引入私有路由 #

所有需要登录才能访问的路由都作为私有路由的子项配置即可：

// /src/App.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import PrivateRoute from './components/PrivateRoute'
import LoginPage from './pages/Login'
import HomePage from './pages/Home'
import SettingPage from './pages/Setting'

const router = createBrowserRouter([
  { path: '/login', element: <LoginPage /> },
  // 权限路由统一嵌套
  {
    element: <PrivateRoute />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/setting', element: <SettingPage /> }
    ]
  }
])

function App() {
  return <RouterProvider router={router} />
}

export default App

4. 全局请求拦截兜底 #

除了路由切换的校验，建议给所有业务接口加响应拦截，只要任意请求返回401就统一清理token跳登录，避免页面长时间停留未切换路由时token过期无法识别的问题：

// 以axios为例
import axios from 'axios'

axios.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response?.status === 401) {
      localStorage.removeItem('auth_token')
      window.location.href = '/login'
    }
    return Promise.reject(err)
  }
)

如果你使用的是react-router v5版本，私有路由的封装语法稍有区别，核心校验逻辑完全一致可以复用。你的服务端token自动续期的规则刚好和路由切换触发校验的逻辑匹配，不需要额外开发续期功能。

内容的提问来源于stack exchange，提问作者M.K. aka Grisu