CODEWITHSUNDEEP
javascriptreactjsreduxpersistent-storage
Chosen
Chosen

Reputation: 892

Write and then read at the same time from LocalStorage in ReactJS + Redux

I am trying to write to localStorage and then read from localStorage authentication token to access an API.

export const authLogin = (username, password) => {
  return (dispatch) => {
    dispatch(authStart());
    axios
      .post(" http://localhost:8000/rest-auth/login/", {
        username: username,
        password: password,
      })
      .then((res) => {
        const token = res.data.key;
        const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
        try {
          localStorage.setItem("token", token);
          localStorage.setItem("expirationDate", expirationDate);
          dispatch(authSuccess(token));
          dispatch(checkAuthTimeout(3600));
        } catch (error) {
          console.log("error storing data");
        }
      })
      .catch((err) => {
        dispatch(authFail(err));
      });
  };
};

and then from a ReactJS method i want to read from the localStorage:

import axios from "axios";
import { endpoint } from "./constants";
var token = localStorage.getItem("token");

export const authAxios = axios.create({
  baseURL: endpoint,
  headers: {
    Authorization: `Token ${token ? localStorage.getItem("token") : null}`,
  },
});

class OrderSummary extends React.Component {
  _isMounted = false;
  state = {
    data: null,
    error: null,
    loading: false,
  };
  componentDidMount() {
    this._isMounted = true;
    this.handelFetchOrder();
  }

  componentWillUnmount() {
    this._isMounted = false;
  }
  handelFetchOrder = () => {
    this.setState({ loading: true });
    authAxios
      .get(orderSummaryURL)
      .then((res) => {
        this.setState({ data: res.data, loading: false });
        console.log(res.data);
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({
            error: "You currently do not have any order",
            loading: false,
          });
        } else {
          this.setState({ error: err, loading: false });
        }
      });
  };

my problem is when i read from localStorage. It the token goes null. Which results a 401 api code since we can't read the token to pass it to the api for results. However, if i refresh the web browser (F5) then all goes to normal.

Upvotes: 0

Views: 472

Answers (1)

Mario Petrovic
Mario Petrovic

Reputation: 8332

In your example you are setting token for your axios when your files load. That means only when the app loads, not after your login. So that item in localStorage is null at that time.

So the solution is to setup interceptor for axios instead of your instance of authAxios:

const App = (props) => {

  // This will trigger when only once when page refreshes
  useEffect(() => {
    axios.interceptors.request.use(
      (config) => {
        config.headers = {
          ...config.headers,
          Authorization: `Token ${token ? localStorage.getItem("token") : null}`
        };

        return config;
      },
      (error) => {
        props.dispatchRedirectToLoginPage()
        return Promise.reject(error);
      }
    );
  }, [])

  return <div>Your app</div>
}

So that every request executes this function and it will take token from localStorage.

And every api call that you make make it with axios.get(...) or what ever method you need.

Upvotes: 1

Related Questions