reaction js redensx에서 새로 고침 토큰 기능을 추가하는 방법

reaction js redensx에서 새로 고침 토큰 기능을 추가하는 방법

나는 리프레시 토큰 기능이 있는 앱을 만들고 있어.그러기 위해서, 나는 이 기능에 대해 배운 후 이 기능을 구현하려고 노력했다.Axios interceptor온라인.그러나 여전히 해결되지 않았다.이렇게 덧붙인 거야.

나는 그것이 옳은지 그른지 모르겠다.방금 리프레시 토큰을 구현해 봤어.나는 전에는 리프레시 토큰에 대해 전혀 몰랐었다.

어떤 도움이라도 좋겠지.

인덱스 js

axios.interceptors.request.use(
  (config) => {
    console.log("step-1", config);
    const token = localStorageService.getAccessToken();
    if (token) {
      config.headers["Authorization"] = "Bearer" + token;
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    console.log("step-2", response);
    return response;
  },
  function (error) {
    const originalRequest = error.config;

    // if (error.response && error.response.status === 401 && !originalRequest._retry) {
    //   history.push("/");
    //   return Promise.reject(error);
    // }

    if (
      error.response &&
      error.response.status === 401 &&
      !originalRequest._retry
    ) {
      originalRequest._retry = true;

      const token = UserServices.getOAuth2().createToken(
        "refresh_token",
        localStorageService.getRefreshToken(),
        { grant_type: "refresh_token" }
      );

      return token
        .refresh()
        .then((res) => {
          console.log("step3", res);
          if (res.status === 201) {
            // 1) put token to LocalStorage
            localStorageService.setToken(res.data);
            // 2) Change Authorization header
            axios.defaults.headers.common["Authorization"] =
              "Bearer " + localStorageService.getAccessToken();
            // 3) return originalRequest object with Axios.
            return axios(originalRequest);
          }
        })
        .catch((error) => {
          // Dispatch Logout Function here
          store.dispatch({
            type: LOGIN_ERROR,
          });
          localStorageService.clearToken();
        });
    }
  }
);

사용자 서비스.js

const localStorageService = LocalStorageService.getService();
class UserServices {
  getOAuth2 = () => {
    var ClientOAuth2 = require("client-oauth2");
    const OAuth2 = new ClientOAuth2({
      clientId: "development",
      clientSecret: "development",
      accessTokenUri: "https://api.xxxx.in/oauth/token",
      authorizationUri: "https://api.xxxx.in/oauth/authorize",
      redirectUri: "https://api.xxxx.in/oauth/callback",
      scopes: ["read", "write", "trust"],
    });
    return OAuth2;
  };

  logout() {
    localStorageService.clearToken();
  }
}

전화해야 할 것 같은데resolve오류 처리기를 사용하면 다음과 같은 문제를 해결할 수 있다.

return token
  .refresh()
  .then((res) => {
    console.log("step3", res);
    if (res.status === 201) {
      // 1) put token to LocalStorage
      localStorageService.setToken(res.data);
      // 2) Change Authorization header
      axios.defaults.headers.common["Authorization"] =
        "Bearer " + localStorageService.getAccessToken();
      // 3) return originalRequest object with Axios.
      res(axios(originalRequest)); // <- call resolve here
    }
  })
  .catch((error) => {
    // Dispatch Logout Function here
    store.dispatch({
      type: LOGIN_ERROR,
    });
    localStorageService.clearToken();
  });

참조URL: https://stackoverflow.com/questions/63027267/how-to-add-refresh-token-function-in-react-js-redux