如何在 react js redux 中添加刷新令牌功能答案

【问题标题】：How to add refresh token function in react js redux如何在 react js redux 中添加刷新令牌功能
【发布时间】：2020-11-11 14:04:30
【问题描述】：

我正在开发一个具有刷新令牌功能的应用程序。为此，我在网上了解了Axios interceptor之后尝试实现这个功能。但是，仍然没有解决。这就是我添加的方式。

不知道是对是错。我刚刚尝试实现刷新令牌。我之前不知道刷新令牌。

任何帮助都会很棒。

index.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();
        });
    }
  }
);

userServices.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();
  }
}

【问题讨论】：

也是你配置的授权，Bearer后面有空格吗？

标签： javascript reactjs react-redux axios refresh-token

【解决方案1】：

我相信你需要在你的错误处理程序中调用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();
  });

【讨论】：