非React组件中调用React Hooks的替代方案及鉴权参数透传优化

首先明确核心规则：React Hook 只能在 React 函数组件或自定义 Hook 的顶层调用，无法在普通 JS 模块中直接调用 useAuth，否则会触发 Hook 调用规则报错。你可以选择以下两种常用方案实现免传 token 的需求：

方案1：将服务封装为自定义 Hook #

这是最符合 React 设计规范的方案，直接把 UserService 改造为自定义 Hook，内部直接调用 useAuth 拿 token：

import Axios from "axios";
import { useAuth } from "react-oidc-context";

const useUserService = () => {
  const auth = useAuth();
  const accessToken = auth.user?.access_token ?? "";

  const getUserRole = () => {
    return Axios({
      method: "get",
      url: "https://<url>/user/role",
      headers: {
        "Authorization": `Bearer ${accessToken}`
      }
    }).then((response) => {
      return response.data;
    }).catch((error) => {
      console.log(error);
    });
  };

  return { getUserRole };
};

export default useUserService;

组件内调用方式：

import useUserService from "../../../services/authentication/userService";

...
const { getUserRole } = useUserService();
// 直接调用即可，无需传token
getUserRole();

方案2：通过 Axios 请求拦截器全局注入 token #

如果不想改造原有服务的调用形态，可以通过拦截器统一给请求加 token，配合全局 token 同步逻辑实现：

import Axios from "axios";
import { useAuth } from "react-oidc-context";

// 全局存储token变量
let globalAccessToken = "";

// 顶层App组件调用此Hook同步auth状态到全局
export const useSyncAuthToken = () => {
  const auth = useAuth();
  globalAccessToken = auth.user?.access_token ?? "";
};

// 创建公共Axios实例
const axiosInstance = Axios.create({
  baseURL: "https://<url>"
});

// 请求拦截器自动注入Authorization头
axiosInstance.interceptors.request.use((config) => {
  if (globalAccessToken) {
    config.headers.Authorization = `Bearer ${globalAccessToken}`;
  }
  return config;
});

const UserService = {
  getUserRole: () => {
    return axiosInstance.get("/user/role")
      .then(res => res.data)
      .catch(err => console.log(err));
  }
}

export default UserService;

使用时先在项目根组件（比如App.tsx）的顶层调用一次 useSyncAuthToken() 同步 token，之后任意位置调用 UserService.getUserRole() 都不需要传 token。

• 自定义 Hook 封装：如果逻辑仅在 React 生态内调用，直接把依赖 Hook 的逻辑封装为自定义 Hook 即可，符合 React 调用规则。
• 全局状态同步：把 Hook 拿到的上下文数据同步到全局变量、localStorage 等普通 JS 模块可访问的存储载体，非组件直接读取存储的内容即可。
• 状态管理库中转：使用 Redux、Zustand、Jotai 等支持非组件读取的状态管理库存储 Hook 获取的数据，非组件可以直接导入状态实例读取数据，不需要依赖 React 调用栈。

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