在 axios 实例中使用 state 令牌

Question

我有一个 state 和我从 api 获得的令牌：

const initialState = {
  isAuth: false,
  token: "",
};

我想在 Axios 实例中重用令牌：

const api = axios.create({
  baseURL: `${baseUrl}`,
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

export default api;

问题是我无法通过 useSelector 读取令牌：

const token = useSelector((state) => state.auth.token);

我收到错误消息：

无效的挂钩调用。 钩子只能在 function 组件的主体内部调用

有什么建议吗？ 提前致谢

Answer 1

我不确定您的 useSelector 被准确调用的位置（以及其他代码片段放置在代码中的位置），但您的特定错误消息清楚地表明，您不是直接在功能组件内调用 useSelector-hook。

我建议您阅读以下文章： Hooks Rules

那里说：

不要在循环、条件或嵌套函数中调用 Hook。 相反，在任何提前返回之前，始终在 React function 的顶层使用 Hooks

Answer 2

您不能在 function 组件或其他挂钩之外使用挂钩。 但是，您可以在没有令牌的情况下创建 axios 实例，然后在拥有该实例时更新该实例（ api ）（请参阅 axios 的Config Defaults ）。

注意：在设置令牌之前，您需要阻止您的应用使用 axios 实例。

未经authorization定义api header：

const api = axios.create({
  baseURL: `${baseUrl}`,
});

在您的顶级组件之一中获取令牌，并将其应用于 axios 实例默认值：

const App = () => {
  const token = useSelector((state) => state.auth.token);

  useEffect(() => {
    if(token) {
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }
  }, [token]);
}

Answer 3

这是因为钩子只能在 React Component 中使用。 为了能够检索此 state，理想的是将其存储在localStorage中。 localStorage可以在任何级别访问（React 组件与否）

您需要以这种方式在 localStorage 中创建一个新值：

localStorage.setItem("myToken",value)

然后您可以在 axios 实例中使用它，如下所示：

localStorage.getItem("myToken")

另外，我建议您使用 axios 的拦截器来处理令牌，这样会更好

希望能帮助到你 ！

imo您还应该使用axios的拦截器来处理访问令牌

资源https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 4

一种选择可能是将您的 Axios 代码包装在自定义挂钩 function 中。 这将允许您使用其他钩子函数——包括通过 useSelector 访问您的 Redux useSelector 。

例如：

const useApi = () => {
  const token = useSelector((state) => state.auth.token);

  const api = axios.create({
    baseURL: `${baseUrl}`,
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return api;
}

export default useApi;