react JS中的私有路由jsx

Question

Problem: I am trying to authenticate a user through isAuth() helpers but it is acting weird. I want it to look for access token if any or call for access token from backend if refresh token is available, and though it works perfectly and sets access token cookie, the issue is if called from PrivateRoutes.jsx , it does not sees the tokens at all and sends the user to login page.

Adding required code for refs:

isAuth():

export const isAuth = () => {
  if (window !== undefined) {
    const accessCookieChecked = getCookie("_mar_accounts_at");
    const refreshCookieChecked = getCookie("_mar_accounts_rt");
    if (accessCookieChecked) {
      return true;
    } else if (refreshCookieChecked) {
      console.log(refreshCookieChecked);
      axios({
        method: "POST",
        url: `${API_URL}/api/token`,
        data: { refresh_token: refreshCookieChecked },
      }).then((res) => {
        console.log(res);
        setCookie("_mar_accounts_at", res.data.accessToken);
        return true;
      });
    } else {
      return false;
    }
  } else {
    return false;
  }
};

PrivateRoutes.jsx

import React from "react";
import { Route, Redirect } from "react-router-dom";

import { isAuth } from "../helpers/auth";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuth() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  ></Route>
);

export default PrivateRoute;

Can someone please see this? And help!

Answer 1

You are running into an async issue most likely, when you make the call in axios, the return true; in the callback never actually returns to your funciton call in the PrivateRoute. Instead, you need to use a Promise/setState/useEffect:

export const isAuth = () => {
  if (window === undefined) {
    return Promise.resolve(false);
  } else {
    const accessCookieChecked = getCookie("_mar_accounts_at");
    const refreshCookieChecked = getCookie("_mar_accounts_rt");
    if (accessCookieChecked) {
      return Promise.resolve(true);
    } else if (refreshCookieChecked) {
      console.log(refreshCookieChecked);
      return new Promise(resolve => {
        axios({
          method: "POST",
          url: `${API_URL}/api/token`,
          data: { refresh_token: refreshCookieChecked },
        }).then((res) => {
          console.log(res);
          setCookie("_mar_accounts_at", res.data.accessToken);
          resolve(true);
        });
      })
      
    } else {
      return Promise.resolve(false);
    }
  }
};

import React, { useState, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';

import { isAuth } from '../helpers/auth';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const [isAuthTrue, setIsAuthTrue] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    isAuth().then(res => {
      setIsAuthTrue(res);
      setLoading(false);
    })
  })
  return (
    <>
      {loading ? (
        <div>some loading state</div>
      ) : (
        <Route
          {...rest}
          render={(props) =>
            isAuthTrue ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{ pathname: '/login', state: { from: props.location } }}
              />
            )
          }
        />
      )}
    </>
  );
};
export default PrivateRoute;