{"id":1654,"date":"2022-06-17T13:58:48","date_gmt":"2022-06-17T04:58:48","guid":{"rendered":"https:\/\/www.miracleave.co.jp\/contents\/?p=1654"},"modified":"2023-05-22T12:01:48","modified_gmt":"2023-05-22T03:01:48","slug":"react-jwt-axios-interceptors","status":"publish","type":"post","link":"https:\/\/www.miracleave.co.jp\/contents\/1654\/react-jwt-axios-interceptors\/","title":{"rendered":"React \u00d7 JWT\u8a8d\u8a3c\u306b\u306faxios\u306eInterceptors"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n<p>\u3053\u3093\u306b\u3061\u306f\uff01\u6700\u8fd1\u30a8\u30b9\u30d7\u30ec\u30c3\u30bd\u306b\u30cf\u30de\u3063\u3066\u304a\u91d1\u306e\u51fa\u8cbb\u304c\u6b62\u307e\u3089\u306a\u3044\u9752\u67f3\u3067\u3059\uff01\uff08\u8ab0\u304b\u6b62\u3081\u3066\u3001\u3001\u3001\uff09<\/p>\n\n\n\n<p>\u4eca\u56de\u306fReact\u306e\u8a8d\u8a3c\u3067\u4f7f\u7528\u3059\u308bJWT\u901a\u4fe1\u306e\u5b9f\u88c5\u306b\u3064\u3044\u3066\u3054\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n<p>JWT\u306e\u4ed5\u7d44\u307f\u306b\u3064\u3044\u3066\u306f\u4ed6\u30b5\u30a4\u30c8\u306b\u983c\u308a\u307e\u3059\u304c\u3001\u8a8d\u8a3c\u3092\u884c\u3046\u4e0a\u3067\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306faccess_token\u3092\u9001\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u307e\u305f\u3001\u305d\u308c\u304c\u7121\u52b9\u306b\u306a\u3063\u3066\u3044\u305f\u5834\u5408\u3001refresh_token\u3092\u4f7f\u7528\u3057\u3066\u3001\u65b0\u305f\u306b\u6709\u52b9\u306aaccess_token\u3092\u53d6\u5f97\u3057\u76f4\u3059\u3053\u3068\u3082\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306f\u3053\u308c\u3092\u3069\u306e\u3088\u3046\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u3001\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3059\u308c\u3070\u826f\u3044\u306e\u304b\u3068\u3044\u3046\u3053\u3068\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u524d\u63d0<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>access_token\u306fstate\u306b\u4fdd\u6301\u3057\u307e\u3059\u3002\uff08LocalStorage\u3084Cookie\u306b\u4fdd\u5b58\u3059\u308b\u30b1\u30fc\u30b9\u3082\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u4eca\u56de\u306fState\u306b\u3057\u307e\u3059\uff09<\/li>\n\n\n\n<li>refresh_token\u306fAPI\u304b\u3089HttpOnly\u5c5e\u6027\u3092\u4ed8\u4e0e\u3057\u3066Cookie\u306b\u4fdd\u6301\u3059\u308b\u3088\u3046\u306b\u9001\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4eca\u56de\u306fAPI\u306e\u5b9f\u88c5\u306f\u5272\u611b\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u69cb\u6210<\/h2>\n\n\n\n<p>\u4eca\u56de\u306f\u7c21\u5358\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306a\u69cb\u6210\u3067\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>src\n \u251c api\n \u2502  \u2514 axios.js                         \/\/ axios\u3092import\u3057\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n \u2502\n \u251c contexts\n \u2502  \u2514 Auth.jsx.                      \/\/ \u8a8d\u8a3c\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306eContext\n \u2502\n \u251c hooks\n \u2502  \u2514 useAuthAxios.js.        \/\/ axios.js\u3067\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305faxios\u3092import\u3057\u3066\u8a8d\u8a3c\u3092\u3059\u308b\n \u2502  \u2514 useRefreshToken.js.  \/\/ refresh_token\u3092\u6271\u3046\n \u2502\n \u251c App.jsx                              \n \u2514 text.jsx                             \/\/ API\u3092\u547c\u3073\u51fa\u3057\u3066\u30c6\u30b9\u30c8\u3059\u308bjsx\u30d5\u30a1\u30a4\u30eb<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u30bd\u30fc\u30b9\u89e3\u8aac<\/h2>\n\n\n\n<p>\u3067\u306f\u65e9\u901f\u30bd\u30fc\u30b9\u306e\u89e3\u8aac\u3092\u3057\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ axios.js\n\nimport axios from &quot;axios&quot;;\n\nconst BASE_URL = &quot;http:\/\/localhost:3500&quot;;\n\nexport default axios.create({ baseURL: BASE_URL });\n\nexport const authAxios = axios.create({\n  baseURL: BASE_URL,\n  headers: { &quot;Content-Type&quot;: &quot;application\/json&quot; },\n  withCredentials: true,\n});<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u3061\u3089\u306f\u30e9\u30a4\u30d6\u30e9\u30ea\u306eaxios\u3092import\u3057\u3066\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u3044\u307e\u3059\u3002\u5b9f\u969b\u306b\u4f7f\u7528\u3059\u308b\u6642\u306f<span class=\"marker\">BASE_URL<\/span>\uff08API\u306eURL\uff09\u3092\u5909\u66f4\u3057\u3066\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u4e3b\u306b\u4f7f\u7528\u3059\u308b\u306e\u306fauthAxios\u306e\u65b9\u3067\u3001\u3053\u308c\u306f\u8a8d\u8a3c\u60c5\u5831\u3092API\u5074\u306b\u9001\u308b\u8a2d\u5b9a\u3092\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ Auth.jsx\n\nimport React, { createContext, useState } from &quot;react&quot;;\n\nexport const AuthContext = createContext({});\n\nconst AuthProvider = ({ children }) =&gt; {\n  const [auth, setAuth] = useState({});\n\n  return (\n    &lt;AuthContext.Provider value={{ auth, setAuth }}&gt;\n      {children}\n    &lt;\/AuthContext.Provider&gt;\n  );\n};\n\nexport default AuthProvider;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u306fContext\u3067auth state\u306b\u8a8d\u8a3c\u60c5\u5831\u3092\u4fdd\u6301\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ App.jsx\n\nimport {\n  BrowserRouter as Router,\n  Route,\n  Routes,\n  Navigate,\n} from &quot;react-router-dom&quot;;\nimport AuthProvider from &quot;.\/contexts\/Auth&quot;;\nimport Test from &quot;.\/test&quot;;\n\nconst App = () =&gt; {\n  return (\n    &lt;Router&gt;\n      &lt;Routes&gt;\n        &lt;Route path=&quot;\/&quot;&gt;\n          &lt;Route path=&quot;login&quot; element={&lt;Login \/&gt;} \/&gt;\n          &lt;Route path=&quot;404&quot; element={&lt;NotFound \/&gt;} \/&gt;\n          &lt;Route path=&quot;*&quot; element={&lt;Navigate to=&quot;404&quot; replace \/&gt;} \/&gt;\n        &lt;\/Route&gt;\n        {\/* \u25bc \u30ed\u30b0\u30a4\u30f3\u5f8c\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0 \u25bc *\/}\n        &lt;Route path=&quot;\/app\/*&quot;&gt;\n          &lt;strong&gt;&lt;span class=&quot;red&quot;&gt;&lt;AuthProvider&gt;&lt;\/span&gt;&lt;\/strong&gt;\n            &lt;Route path=&quot;test&quot; element={&lt;Test \/&gt;} \/&gt;\n          &lt;strong&gt;&lt;span class=&quot;red&quot;&gt;&lt;\/AuthProvider&gt;&lt;\/span&gt;&lt;\/strong&gt;\n        &lt;\/Route&gt;\n      &lt;\/Routes&gt;\n    &lt;\/Router&gt;\n  );\n};\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u3061\u3089\u304c\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u306a\u308a\u307e\u3059\u3002\u4eca\u56de\u30ed\u30b0\u30a4\u30f3\u306f\u3055\u308f\u308a\u307e\u305b\u3093\u304c\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3068\/app\u306b\u30a2\u30af\u30bb\u30b9\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u4eca\u56de\u4f7f\u7528\u3059\u308btest.jsx\u306eTest\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fAuthContext\u306e\u8a8d\u8a3c\u60c5\u5831\u3092\u53c2\u7167\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ useRefreshToken.js\n\nimport axios from &quot;..\/api\/axios&quot;;\nimport { useContext } from &quot;react&quot;;\nimport { AuthContext } from &quot;..\/contexts\/Auth&quot;;\n\nconst useRefreshToken = () =&gt; {\n  const { setAuth } = useContext(AuthContext);\n\n  const refresh = async () =&gt; {\n    \/\/ cookie\u306b\u4fdd\u5b58\u3055\u308c\u305frefresh_token\u3092\u9001\u4ed8\u3057\u3066access_token\u3092\u53d6\u5f97\u3059\u308b\n    const response = await axios.get(&quot;\/refresh&quot;, {\n      withCredentials: true,\n    });\n    setAuth((prev) =&gt; {\n      \/\/ access_token\u3092\u4fdd\u6301\u3059\u308b\n      return { ...prev, accessToken: response.data.accessToken };\n    });\n\n    return response.data.accessToken;\n  };\n\n  return refresh;\n};\n\nexport default useRefreshToken;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306frefresh_token\u3092\u5143\u306baccess_token\u3092\u53d6\u5f97\u3059\u308b\u30ed\u30b8\u30c3\u30af\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002\/refresh\u3068\u3044\u3046\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u5bfe\u3057\u3066<span class=\"marker\">withCredentials: true<\/span>\u3068\u3059\u308b\u3053\u3068\u3067\u3001Cookie\u306b\u4fdd\u5b58\u3057\u305frefresh_token\u3092\u9001\u4ed8\u3057\u307e\u3059\u3002\u305d\u308c\u3092\u5143\u306bAPI\u304caccess_token\u3092\u8fd4\u3059\u306e\u3067\u3001<span class=\"marker\">AuthContext\u306esetAuth<\/span>\u306b\u4fdd\u6301\u3059\u308b\u306e\u3068\u540c\u6642\u306b\u3001<span class=\"marker\">return response.data.accessToken<\/span>\u3068\u3057\u3066\u3001\u5024\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/useAuthAxios.js\n\nimport { authAxios } from &quot;..\/api\/axios&quot;;\nimport { useContext, useEffect } from &quot;react&quot;;\nimport useRefreshToken from &quot;.\/useRefreshToken&quot;;\nimport { AuthContext } from &quot;..\/contexts\/Auth&quot;;\n\nconst useAuthAxios = () =&gt; {\n  const refresh = useRefreshToken();\n  const { auth } = useContext(AuthContext);\n\n  useEffect(() =&gt; {\n    \/\/ \u30ea\u30af\u30a8\u30b9\u30c8\u524d\u306b\u5b9f\u884c\u3002header\u306b\u8a8d\u8a3c\u60c5\u5831\u3092\u4ed8\u4e0e\u3059\u308b\n    const requestIntercept = authAxios.interceptors.request.use(\n      (config) =&gt; {\n        if (!config.headers[&quot;Authorization&quot;]) {\n          config.headers[&quot;Authorization&quot;] = `Bearer ${auth?.accessToken}`;\n        }\n        return config;\n      },\n      (error) =&gt; Promise.reject(error)\n    );\n\n    \/\/ \u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u53d7\u3051\u53d6\u3063\u305f\u76f4\u5f8c\u306b\u5b9f\u884c\u3002\u3082\u3057\u8a8d\u8a3c\u30a8\u30e9\u30fc\u3060\u3063\u305f\u5834\u5408\u3001\u518d\u5ea6\u30ea\u30af\u30a8\u30b9\u30c8\u3059\u308b\u3002\n    const responseIntercept = authAxios.interceptors.response.use(\n      (response) =&gt; response,\n      async (error) =&gt; {\n        const prevRequest = error?.config;\n        \/\/ 403\u8a8d\u8a3c\u30a8\u30e9\u30fc(header\u306baccess_token\u304c\u306a\u3044\u3002\u3082\u3057\u304f\u306faccess_token\u304c\u7121\u52b9)\n        if (error?.response?.status === 403 &amp;&amp; !prevRequest.sent) {\n          prevRequest.sent = true;\n          \/\/ \u65b0\u3057\u304faccess_token\u3092\u767a\u884c\u3059\u308b\n          const newAccessToken = await refresh();\n          prevRequest.headers[&quot;Authorization&quot;] = `Bearer ${newAccessToken}`;\n          \/\/ \u518d\u5ea6\u5b9f\u884c\u3059\u308b\n          return authAxios(prevRequest);\n        }\n        return Promise.reject(error);\n      }\n    );\n\n    return () =&gt; {\n      \/\/ \u96e2\u8131\u3059\u308b\u3068\u304d\u306beject\u3059\u308b\n      authAxios.interceptors.request.eject(requestIntercept);\n      authAxios.interceptors.response.eject(responseIntercept);\n    };\n  }, [auth, refresh]);\n\n  return authAxios;\n};\n\nexport default useAuthAxios;<\/code><\/pre><\/div>\n\n\n\n<p>\u4eca\u56de\u306e\u6700\u91cd\u8981\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u3059\uff01\u3053\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3067\u306f<span class=\"marker\">axios.js<\/span>\u3067\u4f5c\u6210\u3057\u305f<span class=\"marker\">authAxios<\/span>\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u76f4\u524d\u3068\u30ec\u30b9\u30dd\u30f3\u30b9\u76f4\u5f8c\u306b\u5b9f\u884c\u3057\u305f\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u3066\u8fd4\u3059\u95a2\u6570\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3067\u306f\u307e\u305a\u306f\u30ea\u30af\u30a8\u30b9\u30c8\u76f4\u524d\u306e\u51e6\u7406\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>    const requestIntercept = authAxios.interceptors.request.use(\n      (config) =&gt; {\n        if (!config.headers[&quot;Authorization&quot;]) {\n          config.headers[&quot;Authorization&quot;] = `Bearer ${auth?.accessToken}`;\n        }\n        return config;\n      },\n      (error) =&gt; Promise.reject(error)\n    );<\/code><\/pre><\/div>\n\n\n\n<p><span class=\"marker\">axios.js<\/span>\u304b\u3089import\u3057\u3066\u304d\u305f<span class=\"marker\">authAxios<\/span>\u306b\u5bfe\u3057\u3066<span class=\"marker\">interceptors<\/span>\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306f\u3001<span class=\"red\">then\u307e\u305f\u306fcatch\u306b\u3088\u3063\u3066\u51e6\u7406\u304c\u3055\u308c\u308b\u524d\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u307e\u305f\u306f\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u631f\u307f\u8fbc\u3080<\/span>\uff08\u307e\u3055\u306b\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\uff09\u3053\u3068\u304c\u3067\u304d\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4e0a\u8a18\u3067\u306f<span class=\"marker\">interceptors.request<\/span>\u3068\u3057\u3066\u3044\u308b\u306e\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u308b\u524d\u306b\u51e6\u7406\u304c\u884c\u308f\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u3053\u306e\u51e6\u7406\u3067\u306fhttp\u30d8\u30c3\u30c0\u30fc\u306eAuthorization\u306bAuthContext\u306b\u4fdd\u6301\u3057\u3066\u3044\u308baccess_token\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u308c\u304c\u6b63\u5e38\u306b\u884c\u308f\u308c\u308b\u3068API\u5074\u3067access_token\u3092\u691c\u77e5\u3057\u3066\u8a8d\u8a3c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u65e2\u306bAuthorization\u306baccess_token\u304c\u3042\u308b\u5834\u5408\u306f\u305d\u306e\u307e\u307econfig\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3067\u306f\u7d9a\u3044\u3066\u30ec\u30b9\u30dd\u30f3\u30b9\u5f8c\u306e\u51e6\u7406\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>    const responseIntercept = authAxios.interceptors.response.use(\n      (response) =&gt; response,\n      async (error) =&gt; {\n        const prevRequest = error?.config;\n        \/\/ 403\u8a8d\u8a3c\u30a8\u30e9\u30fc(header\u306baccess_token\u304c\u306a\u3044\u3002\u3082\u3057\u304f\u306faccess_token\u304c\u7121\u52b9)\n        if (error?.response?.status === 403 &amp;&amp; !prevRequest.sent) {\n          prevRequest.sent = true;\n          \/\/ \u65b0\u3057\u304faccess_token\u3092\u767a\u884c\u3059\u308b\n          const newAccessToken = await refresh();\n          prevRequest.headers[&quot;Authorization&quot;] = `Bearer ${newAccessToken}`;\n          \/\/ \u518d\u5ea6\u5b9f\u884c\u3059\u308b\n          return authAxios(prevRequest);\n        }\n        return Promise.reject(error);\n      }\n    );<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u3061\u3089\u306f<span class=\"marker\">interceptors.response<\/span>\u3068\u3057\u3066\u3044\u308b\u305f\u3081\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u76f4\u5f8c\u306b\u5b9f\u884c\u3057\u307e\u3059\u3002\u4f55\u4e8b\u3082\u306a\u3051\u308c\u3070\u901a\u5e38\u901a\u308a\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u8fd4\u3057\u307e\u3059\u3002\u3082\u3057access_token\u306e\u30bb\u30c3\u30b7\u30e7\u30f3\u5207\u308c\u7b49\u306b\u3088\u3063\u3066API\u3067403\u30a8\u30e9\u30fc\u3092\u53d7\u3051\u53d6\u3063\u305f\u5834\u5408\uff08API\u3092\u305d\u306e\u3088\u3046\u306a\u4f5c\u308a\u306b\u3057\u3066\u3044\u308b\u524d\u63d0\uff09\u3001\u65b0\u305f\u306baccess_token\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><span class=\"marker\">const newAccessToken = await refresh();<\/span>\u306erefresh\u306fuseRefreshToken \u30d5\u30c3\u30af\u306e\u95a2\u6570\u3067\u65b0\u3057\u3044access_token\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u53d7\u3051\u53d6\u3063\u305f<span class=\"marker\">newAccessToken<\/span>\u3092<span class=\"marker\">prevRequest.headers[&#8220;Authorization&#8221;] = `Bearer ${newAccessToken}`;<\/span>\u306e\u3088\u3046\u306b\u518d\u5ea6\u30d8\u30c3\u30c0\u30fc\u306b\u8a70\u3081\u76f4\u3057\u3066\u3001\u6700\u5f8c\u306b<span class=\"marker\">return authAxios(prevRequest)<\/span>\u3067\u518d\u5ea6\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3059\u308b\u3068\u4eca\u5ea6\u306f\u6b63\u5e38\u306aaccess_token\u306e\u305f\u3081\u8a8d\u8a3c\u304c\u901a\u308a\u3001\u6b63\u5e38\u306b\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u5909\u3048\u308b\u3068\u3044\u3046\u4ed5\u7d44\u307f\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ test.jsx\n\nimport { useState, useEffect } from &quot;react&quot;;\nimport useAuthAxios from &quot;.\/hooks\/useAuthAxios&quot;;\n\nconst Test = () =&gt; {\n  const [value, setValue] = useState();\n  const authAxios = useAuthAxios();\n\n  useEffect(() =&gt; {\n    const getUsers = async () =&gt; {\n      try {\n        const response = await authAxios.get(&quot;\/users&quot;);\n        setValue(response.data);\n      } catch (error) {\n        console.error(error);\n      }\n    };\n\n    getUsers();\n  }, []);\n\n  return &lt;&gt;{value}&lt;\/&gt;;\n};\n\nexport default Test;<\/code><\/pre><\/div>\n\n\n\n<p>\u6700\u5f8c\u306b\u5b9f\u969b\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u305d\u306e\u7d50\u679c\u3092\u51fa\u529b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><span class=\"marker\">\/users<\/span>\u306f\u30e6\u30fc\u30b6\u30fc\u306e\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308bAPI\u3067\u3059\u3002\u3053\u306eAPI\u306f\u8a8d\u8a3c\u3055\u308c\u3066\u3044\u306a\u3044\u3068\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u305d\u306e\u305f\u3081\u5148\u307b\u3069\u8a2d\u5b9a\u3057\u305f<span class=\"marker\">authAxios<\/span>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<span class=\"marker\">authAxios<\/span>\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u3082\u3057\u8a8d\u8a3c\u304c\u5207\u308c\u3066\u3044\u3066\u3082\u81ea\u52d5\u7684\u306baccess_token\u3092\u66f4\u65b0\u3057\u3066\u304f\u308c\u3066\u6b63\u5e38\u306b\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u8fd4\u3063\u3066\u304f\u308b\u306e\u3067\u3001UI\u5074\u3067\u306f\u7279\u306b\u8a8d\u8a3c\u3092\u610f\u8b58\u305b\u305a\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\uff08\u4f8b\u5916\u51e6\u7406\u7b49\u306f\u5fc5\u8981\u3067\u3059\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u3044\u304b\u304c\u3067\u3057\u305f\u3067\u3057\u3087\u3046\u304b\uff1fJWT\u3092\u4f7f\u7528\u3059\u308b\u3068\u3069\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067access_token\u306e\u66f4\u65b0\u3092\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u60a9\u3093\u3060\u308a\u3001\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3059\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u3044\u3053\u3068\u3082\u591a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002\u4ee5\u524d\u79c1\u306f\u3053\u306e<span class=\"marker\">axios.interceptors<\/span>\u3092\u77e5\u3089\u305a\u306b\u81ea\u5206\u3067\u30b4\u30ea\u30b4\u30ea\u5b9f\u88c5\u3057\u305f\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u53ef\u8aad\u6027\u3082\u60aa\u304f\u3042\u307e\u308a\u7d0d\u5f97\u3067\u304d\u308b\u3082\u306e\u306f\u4f5c\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u662f\u975e\u3053\u3061\u3089\u3092\u6d3b\u7528\u3057\u3066\u8a8d\u8a3c\u5468\u308a\u3092\u6574\u3048\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><a href=\"http:\/\/\u53c2\u8003\uff1aaxios\u516c\u5f0f\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/axios-http.com\/docs\/interceptors<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b \u3053\u3093\u306b\u3061\u306f\uff01\u6700\u8fd1\u30a8\u30b9\u30d7\u30ec\u30c3\u30bd\u306b\u30cf\u30de\u3063\u3066\u304a\u91d1\u306e\u51fa\u8cbb\u304c\u6b62\u307e\u3089\u306a\u3044\u9752\u67f3\u3067\u3059\uff01\uff08\u8ab0\u304b\u6b62\u3081\u3066\u3001\u3001\u3001\uff09 \u4eca\u56de\u306fReact\u306e\u8a8d\u8a3c\u3067\u4f7f\u7528\u3059\u308bJWT\u901a\u4fe1\u306e\u5b9f\u88c5\u306b\u3064\u3044\u3066\u3054\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\uff01 JWT\u306e\u4ed5\u7d44\u307f\u306b\u3064\u3044\u3066\u306f\u4ed6\u30b5\u30a4\u30c8\u306b\u983c\u308a\u307e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[119,80,118,2],"class_list":["post-1654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-axios","tag-javascript","tag-jwt","tag-react"],"jetpack_featured_media_url":"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2022\/06\/react_original_logo_icon_146374.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/1654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":5,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/1654\/revisions"}],"predecessor-version":[{"id":2351,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/1654\/revisions\/2351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/media\/1657"}],"wp:attachment":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/media?parent=1654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/categories?post=1654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/tags?post=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}