类型“{}”不可分配给类型“AxiosRequestHeaders”

Question

我正在使用 typescript 开发一个 React 应用程序，但我遇到了 AxiosResquestHeader 的错误，它使类型始终无法分配。我想从 localStorage 获取登录用户的当前令牌。这是我的 AuthHeaders.ts

export default function authHeader(): AxiosRequestHeaders {
  type userToken = {
  accessToken: string;
};
  const localstorageUser = localStorage.getItem("user");
  if (!localstorageUser) {
    return {};
  }
  const user = JSON.parse(localstorageUser);
  if (user && user.token) {
    return { Authorization: `Token ${user.token}` };
  }
  return {};

}

这是从 AuthContext.ts 调用的，如下所示

export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const navigate = useNavigate();
  const [user, setUser] = useState(() => AuthService.getCurrentUser());

  async function login(email: string, password: string) {
    const data = await AuthService.login(email, password);
    setUser(data);
    return data;
  }

  function logout() {
    AuthService.logout();
    setUser(null);
    navigate("/login");
  }

  // axios instance for making requests
  const authAxios = axios.create();

  // request interceptor for adding token
  authAxios.interceptors.request.use((config) => {
    // add token to request headers
   ** config.headers = authHeader();**
    return config;
  });

这是我得到的错误：

ERROR in src/services/AuthHeaders.ts:14:5

TS2322: Type '{ Authorization: string; }' is not assignable to type 'AxiosRequestHeaders'.
  Type '{ Authorization: string; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.
    12 |   const user = JSON.parse(localstorageUser);
    13 |   if (user && user.token) {
  > 14 |     return { Authorization: `Token ${user.token}` };
       |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    15 |     // throw new Error('User Token Found');
    16 |   }
    17 |   // return {};


ERROR in src/services/AuthHeaders.ts:14:5

TS2322: Type '{ Authorization: string; }' is not assignable to type 'AxiosRequestHeaders'.
  Type '{ Authorization: string; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.
    12 |   const user = JSON.parse(localstorageUser);
    13 |   if (user && user.token) {
  > 14 |     return { Authorization: `Token ${user.token}` };
       |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    15 |     // throw new Error('User Token Found');
    16 |   }
    17 |   // return {};

当我注释掉 AuthHeaders.ts 中的返回方法并将其替换为throw new Error()程序时，似乎编译没有任何问题，但当然，逻辑是不正确的。

我对打字稿和反应概念有点陌生，但我确信这可能与打字稿返回类型有关。无论如何，我真的需要你的帮助。谢谢

Answer 1

您可能想使用RawAxiosRequestHeaders而不是AxiosRequestHeaders.

AxiosRequestHeaders是一个继承的类AxiosHeaders，不能仅从对象 ( {}) 实例化。

RawAxiosRequestHeaders另一方面只是一个界面，可能适合您在这里想要实现的目标。