Estoy tratando de hacer una función llamada isAuthenticated() que devuelva verdadero o falso dependiendo del estado de autenticación, obviamente. Cuando el usuario inicia sesión, obtengo un token como respuesta que almaceno en el almacenamiento local y uso en las solicitudes de autenticación requeridas utilizando el método de autenticación Bearer . Ahora mi código se ve así:
// axios instance const a = axios.create({ baseURL: "http://mydomain/api", withCredentials: false, headers: { "Content-Type": "application/json", Accept: "application/json", }, }); const testToken= () => { a.defaults.headers["Authorization"] = `Bearer ${localStorage.getItem( "token" )}`; // using bearer authintication return a.get(`/isLogin`); // api route to check token state }; // my function function isAuthenticated() { if (!localStorage.token) { return false; } else { testToken() .then((response) => { return true; }) .catch((error) => { if (error.response.status === 401) { return false; } }); } } console.log(isAuthenticated()); // this logs undefined Mi problema es que registra undefined . Ahora entiendo que la razón de esto es que el método get de axios es una promesa y que el código continúa ejecutándose antes de que se resuelva, por lo que mi pregunta es: ¿hay alguna forma de bloquear la ejecución del código hasta que se resuelva?
Creo que hay algo fundamentalmente erróneo con mi lógica, por lo que si tiene una forma adecuada de implementar esto, ayúdeme.
Cuando devuelve valor desde la devolución de llamada de la promesa, regresa a un vacío. Lo que necesita es cambiar la forma en que llama a su función isAuthenticated :
// axios instance const a = axios.create({ baseURL: "http://mydomain/api", withCredentials: false, headers: { "Content-Type": "application/json", Accept: "application/json", }, }); const testToken= () => { a.defaults.headers["Authorization"] = `Bearer ${localStorage.getItem( "token" )}`; // using bearer authintication return a.get(`/isLogin`); // api route to check token state }; // my function function isAuthenticated() { return new Promise((resolve, reject) => { if (!localStorage.token) { resolve(false); } else { testToken() .then((response) => { resolve(true); }) .catch((error) => { if (error.response.status === 401) { resolve(false); } }); } }); } isAuthenticated().then((response) => { if (result) { //authenticated } else { //not authenticated } }); Puede usar await para hacerlo menos "incómodo", pero aún así deberá volver a evaluar cómo llama a las funciones asíncronas.
function isAuthenticated(isReject) { return new Promise((resolve, reject) => { setTimeout(() => isReject ? reject("hello word rejected") : resolve("hello world"), 3000); //delay 3sec }); } async function myFunc(id) { const result = await isAuthenticated(id == 3); //wait until promise is resolved console.log("result" + id, result); return "this was sent to 'then' callback: " + result; }; console.log("myFunc return", myFunc(1)); console.log("myFunc return2", myFunc(2) .then((result) => console.log("result2 within then:", result)) //this will not fire .catch((result) => console.log("rejected2:", result))); console.log("myFunc return3", myFunc(3) .then((result) => console.log("result3 within then:", result)) //this will not fire .catch((result) => console.log("rejected3:", result)));