Sitzungscookies in React verwenden

Question

Ich habe eine Frage zu Sitzungscookies in React.

Derzeit ist dies, wie ich einen Benutzer authentifizieren:

export function loginUser({ email, password }) { 
    return function(dispatch) { 
     axios.post(`${API_URL}/users/authenticate`, { email, password }, { withCredentials: true }) 
      .then((response) => { 
       if (response.data.result_status == "success") { 
        localStorage.setItem("token", JSON.stringify(response.data.user)) 
         dispatch({ type: AUTHENTICATE_USER }); 
         browserHistory.push("/home"); 
        }) 
       } 
      }) 
      .catch(() => { 
       dispatch(authError('Incorrect Login Info')); 
      }); 
    } 
} 

ich die email und password an eine URL senden. Wenn die response.data.result_status == "success", dann ich die Benutzerinformationen (wie ihr Name und E-Mail) zu einem localStorage-Token und ich rufe AUTHENTICATE_USER, die ein anderes localStorage Element auf true setzt.

Da ich localStorage verwende, bleiben die Daten beim erneuten Laden erhalten. Und solange das authentifizierte localStorage nicht auf null gesetzt ist, bleibe ich auf dem System.

Nun möchten wir jedoch auf dem System so lange bleiben, wie die Sitzung des Cookies nicht abgelaufen ist. Momentan bleibe ich auf dem System basierend auf dem Token, das ich auf den lokalen Speicher gesetzt habe, nicht auf dem Cookie.

Das Back-End verwendet nicht JWT, nur ein Cookie. Gibt es eine Möglichkeit für mich zu überprüfen, ob der Cookie noch mit Axios in Verbindung steht?

Answer 1

Der einzige, der weiß, dass die Sitzung aus dem Cookie noch aktiv ist, ist die API, daher müssen Sie auf dieser Seite überprüfen, ob die Sitzung aus dem Cookie noch aktiv ist. Ich nehme an, Sie erhalten eine 401 Unauthenticated, wenn Sie nicht mehr angemeldet sind, so dass Sie den Statuscode der Antwort mit jeder Anfrage überprüfen und den localStorage Artikel entfernen können, wenn die Sitzung abgelaufen ist.

Ich schlage vor, Sie eine Antwort verwenden werden interceptor from Axios den Statuscode zu überprüfen:

axios.interceptors.response.use(function (response) { 
    // Do something with response data 
    return response; 
    }, function (error) { 
    // Do something with response error 
    if (error.status === 401) { 
     // DELETE YOUR AUTHENTICATE_USER item from localStorage 
    } 
    return Promise.reject(error); 
});