如何在Next.js中用AWS Access Token创建受保护路由并解决页面闪烁问题？

仪表盘页面出现短暂闪烁，是因为受保护路由的Token校验逻辑滞后于组件渲染——组件先挂载渲染了仪表盘内容，等localStorage的Token检查完成、确定无权限后才触发跳转，这就导致了用户能看到瞬间的页面内容。

核心思路是在Token校验完成前，阻止目标页面渲染，以下是几种可行的实现方式：

1. 在HOC中添加加载状态 #

修改你的高阶组件，在校验Token的过程中返回加载占位（比如加载动画、空白提示），等校验结束后再决定渲染目标组件还是跳转登录页：

const ProtectedRoute = (WrappedComponent) => {
  return (props) => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [hasValidToken, setHasValidToken] = React.useState(false);

    React.useEffect(() => {
      // 从localStorage获取Token
      const awsToken = localStorage.getItem('aws_access_token');
      if (awsToken) {
        setHasValidToken(true);
      } else {
        // 无Token直接跳转登录页
        props.history.push('/login');
      }
      setIsLoading(false);
    }, [props.history]);

    // 校验未完成时显示加载状态
    if (isLoading) {
      return <div>加载中...</div>; // 可替换为项目的全局加载组件
    }

    // 有有效Token时渲染目标组件
    return hasValidToken ? <WrappedComponent {...props} /> : null;
  };
};

2. React Router v6+ 路由层面前置校验 #

如果使用React Router v6及以上版本，可以直接在路由元素中集成校验逻辑，通过Navigate组件提前拦截未授权访问：

import { Navigate, useLocation } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const location = useLocation();
  const [authChecked, setAuthChecked] = React.useState(false);
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  React.useEffect(() => {
    const token = localStorage.getItem('aws_access_token');
    setIsAuthenticated(!!token);
    setAuthChecked(true);
  }, []);

  // 校验未完成时不渲染任何内容（或加载组件）
  if (!authChecked) {
    return null;
  }

  return isAuthenticated ? (
    children
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
};

// 路由使用示例
<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

3. 全局初始化阶段完成校验 #

在应用根组件中提前完成Token校验，再决定渲染登录页还是主应用路由，从根源避免未授权页面的挂载：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
  const [appReady, setAppReady] = React.useState(false);
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  React.useEffect(() => {
    const token = localStorage.getItem('aws_access_token');
    setIsAuthenticated(!!token);
    setAppReady(true);
  }, []);

  if (!appReady) {
    return <div>初始化中...</div>;
  }

  return (
    <Router>
      <Routes>
        {isAuthenticated ? (
          <>
            <Route path="/dashboard" element={<Dashboard />} />
            {/* 其他受保护路由 */}
          </>
        ) : (
          <Route path="/login" element={<Login />} />
        )}
        <Route path="*" element={<Navigate to={isAuthenticated ? "/dashboard" : "/login"} />} />
      </Routes>
    </Router>
  );
}

• 禁止在组件渲染阶段直接执行跳转（比如window.location.href），必须把跳转逻辑放在useEffect或其他生命周期钩子中，避免组件先渲染再跳转。
• 加载占位内容可以根据产品需求自定义，比如使用全局加载动画，提升用户体验。
• 如果Token需要后端接口验证有效性，也要在接口请求完成前保持加载状态，不要提前渲染目标页面。

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