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

Question

type here

我正在使用 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()时，程序似乎编译没有任何问题，但当然，逻辑是不正确的。

我对 typescript 和反应概念有点陌生，但我确信这可能与typescript 返回类型有关。 不管怎样，我真的需要你的帮助。 谢谢

Answer 1

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

AxiosRequestHeaders是一个 class 继承自AxiosHeaders ，不能仅从 object ( {} ) 实例化。

另一方面， RawAxiosRequestHeaders只是一个接口，可能适合您要在此处实现的目标。

Answer 2

我看到您只是返回一个包含授权令牌的 object。 为此， authHeader的返回类型不一定是AxiosRequestHeaders

您可以在函数的返回类型中使用它。

type userToken = {
  accessToken: string;
}

export default function authHeader(): {Authorization: string} | {} {
}

type userToken = {
  accessToken: string;
};

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