反应中的令牌控制

问题描述

我有一个简单的应用。在身份验证中，用户在第一次登录时刷新令牌将cookie存储在本地存储中，访问令牌存储在localstorage中。如果令牌仍然有效，我希望用户过一会儿再打开应用程序，然后redux必须初始化用户。我已经为这种流程创建了一个组件

    export const StartupSplash = (props) => {
  const dispatch = useDispatch();

  const { loading } = useSelector((state) => ({
    loading: state.authReducer.loading,}));

  useEffect(() => {
    // burada dispatch yapılabilir initializerequest ile ve tek bir loading ile iş çözülebilir
    const { accessToken,refreshToken } = getTokens();
    console.log("refresh: ",refreshToken);
    console.log("access: ",accessToken);

    if (
      !accessToken ||
      !refreshToken ||
      accessToken === undefined ||
      refreshToken === undefined
    ) {
      console.log("no token");

      dispatch(authActions.initializeUserFailure());
      history.push("/");
      return;
      //return setBusy(false)
    }

    let hasTokenExpired = accessToken ? isTokenExpired(accessToken) : true;
    console.log(hasTokenExpired);

    if (hasTokenExpired && refreshToken) {
      const setTokens = async () => {
        try {
          console.log("hastokenexpired");
          const result = await userService.refreshToken(refreshToken);
          //burada localstorage atmazsak register olduğu zaman ki tokenı kullanıyor ve 401 hatası oluyor

          console.log("access: " + result.access_token);

          dispatch(authActions.initializeUser());
          console.log("initialize");
          return;
        } catch (err) {
          console.log(err);

          dispatch(authActions.initializeUserFailure());
          //history.push("/unauthorized");
          return;
        }
      };
      setTokens();
    } else if (hasTokenExpired && !refreshToken) {
      console.log("hey");
      dispatch(authActions.initializeUserFailure());

      //history.push("/unauthorized");

      return;
    } else {
      if (accessToken && refreshToken) {
        console.log("initialize user in else");
        dispatch(authActions.initializeUser());
        return;
      }
    }
  },[]);

  const { children } = props;

  return (
    //    !isBusy ? children : <div>bekleyin</div>
    loading ? (
      <CenterComponent>
        <BounceLoader color={"#56DDC3"} />
      </CenterComponent>
    ) : (
      children
    )
  );
};

我也在使用axios拦截器

axios.interceptors.response.use(
  async (response) => {
    return response;
  },async (error) => {
    const { REACT_APP_LOCALACCESS,REACT_APP_REFRESHTOKEN } = process.env;
    const { status,data } = error.response;
    console.log(error.config._retry);
    const originalRequest = error.config;
    console.log(status);
    console.log(data);
    const refreshToken = cookies.get(REACT_APP_REFRESHTOKEN);
   
    if (refreshToken) {
      console.log(refreshToken)
      if (error.response.status===401 && data.message === "Invalid refresh token..") {
        console.log("unauthroized");
        history.push("/");
        return;
      }
      if(error.response.status === 401 && data.message === "You are not authorized to access this route,you don't have a valid refresh token to create new access token "){
        console.log("invalid refresh token");
        history.push("/unauthorized");
        return;
      }

      if (error.response.status === 401 && !originalRequest._retry) {
        if (isRefreshing) {
          console.log("isRefreshing");
          return new Promise((resolve,reject) => {
            failedQueue.push({ resolve,reject });
          })
            .then((accessToken) => {
              originalRequest.headers["Authorization"] =
                "Bearer:" + accessToken;
              console.log("access: " + accessToken);
              return axios(originalRequest);
            })
            .catch((err) => {
              console.log("err");
              return Promise.reject(err);
            });
        }
        console.log("no refreshing");

        originalRequest._retry = true;
        console.log(originalRequest._retry);
        isRefreshing = true;
        const endpoint = generateApiEndpoint("auth/token");

        return new Promise((resolve,reject) => {
          axios
            .post(endpoint,{ refreshToken })
            .then((result) => {
              localStorage.setItem(
                REACT_APP_LOCALACCESS,result.data.access_token
              );

              axios.defaults.headers.common["Authorization"] =
                "Bearer:" + result.data.access_token;
              originalRequest.headers["Authorization"] =
                "Bearer:" + result.data.access_token;

              processQueue(null,result.data.access_token);
              resolve(axios(originalRequest));
            })
            .catch((err) => {
              processQueue(err,null);
              reject(err);
            })
            .then(() => {
              isRefreshing = false;
            });
          //TODO:Eğer refresh tokenın da süresi dolmuşsa burda history.push oluyor. ama diğer tarafı bozuyor
        });
      }

      console.log("unauthroized");
     
    }
    console.log("unauthroized");

    return Promise.reject(error);
  }
);
export default axios;

基本上我的路线可能是这样的

     <StartupSplash>
                 <AppRoute
                        exact
                        path=/
                        component={HomePage}
                        layout={CommonLayout}
                      />
     
</StartupSplash>

有没有更好的方法，例如钩子或其他方法。因为这些感觉不好。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）