React+Node API授权机制逻辑设计及页面权限校验合理性咨询

我正在学习React，在理解如何实现优质的授权机制逻辑方面存在困惑。我的后端基于Node API搭建，当前授权流程如下：

• 注册：用户注册时向后端发送登录名及经bcrypt加密的密码
• 登录：用户登录后获取JWT令牌
• 管理员权限：前端通过react-router-v6的受保护路由，向后端查询用户权限，若有权限则可访问管理员专区

我的问题是：每次页面访问时都检查用户是否具备受保护路由的权限，这种做法是否合理？

相关代码如下：

// function that checking if user has permission to access the page
const checkPermission = (permissions) => {
  console.log(permissions);
  const configuration = {
    method: "get",
    url: "http://localhost:3005/auth-endpoint",
    headers: {
      Authorization: `Bearer ${permissions}`,
    },
  };

  // make the API call
  axios(configuration)
    .then(() => {})
    .catch((error) => {
      error = new Error();
    });
}

这种每次访问受保护路由都向后端校验权限的做法是合理的，但可以根据实际场景做针对性优化，具体分析如下：

合理性说明 #

1. 核心安全保障：前端的权限状态极易被篡改（比如本地存储的标识），每次请求都让后端做权威校验，能彻底避免前端伪造权限访问敏感页面的风险。
2. 适配权限变更：如果后端对用户权限做了实时调整（比如管理员撤销了某用户的权限），前端能及时感知到，不会因为缓存的旧权限信息导致越权访问。

可优化方向 #

1. 添加权限缓存机制
   可以把后端返回的权限信息缓存到内存或本地存储中，设置合理的过期时间。下次访问路由时先检查缓存有效性，仅在缓存过期或不存在时发起后端请求，减少不必要的API调用，提升页面加载速度。

2. 在JWT中嵌入权限信息
   登录生成JWT令牌时，把用户的权限列表（比如isAdmin: true、permissions: ['manage_users', 'view_dashboard']）作为payload嵌入令牌。前端可直接解析JWT快速完成路由拦截判断，但要注意：

JWT是Base64编码而非加密，不能存放敏感信息；同时后端处理接口请求时，仍需单独校验JWT有效性和用户权限，不能完全依赖前端判断。

3. 统一路由拦截逻辑
   把权限校验封装成React Router的自定义路由组件（比如ProtectedRoute），统一处理权限判断、加载状态和跳转逻辑，避免重复代码：

const ProtectedRoute = ({ element, requiredPermission }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(null);
  const token = localStorage.getItem('token');
  const navigate = useNavigate();

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const res = await axios.get('http://localhost:3005/auth-endpoint', {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (res.data.permissions.includes(requiredPermission)) {
          setIsAuthenticated(true);
        } else {
          setIsAuthenticated(false);
          navigate('/unauthorized');
        }
      } catch (err) {
        setIsAuthenticated(false);
        navigate('/login');
      }
    };
    checkAuth();
  }, [token, requiredPermission, navigate]);

  if (isAuthenticated === null) {
    return <div>加载中...</div>; // 替换为实际加载组件
  }

  return isAuthenticated ? element : null;
};

// 使用示例
<Route path="/admin" element={<ProtectedRoute element={<AdminDashboard />} requiredPermission="admin" />} />

4. 后端接口的权限兜底校验
   即使前端做了路由拦截，后端的每个敏感接口也必须单独校验用户权限，防止用户直接通过API工具调用敏感接口，这是权限安全的最后一道防线。

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