0

Estoy enfrentando dificultades para obtener la cookie que se establece en el navegador desde el backend y luego enviarla en las siguientes solicitudes. Inicialmente, tengo un endpoint que al recibir contraseña y usuario devuelve dos cookies: 'token' y 'refreshToken', las cuales se establecen en el navegador correctamente. Posteriormente, deseo ejecutar otro endpoint que requiere el token para devolver el resultado deseado. ¿Cómo puedo enviar ese token que esta como una cookie establecido en las siguientes peticiones? A continuación, describo mi código actual:

investigue y dice que al configurar axios con withCredentials: true obtiene el token automaticamnte de la cookies y lo envia en las siguietes peticiones que se hagan en la misma url

Tengo este endpoint que estable dos cookies en el navegador al enviarle el usuario y contraseña correctamente las manda como Set-Cookie

[HttpPost]
        [Route("Authenticate")]
        [ServiceFilter(typeof(IpLimitActions))]
        [EnableRateLimiting("General")]
        public async Task<IActionResult> Autenticar([FromBody] AuthorizationRequest authorization)
        {
            try
            {
                var resultAuthorization = await _authorizationService.ReturnToken(authorization);
                if (resultAuthorization == null)
                {
                    return Unauthorized();
                }
                else
                {
                    // Crear y configurar la cookie de token
                    var tokenCookieOptions = new CookieOptions
                    {
                        HttpOnly = true,
                        Secure = true, // Se debe configurar como true si el sitio es HTTPS
                        SameSite = SameSiteMode.Lax, // O ajusta según los requisitos de seguridad
                        Expires = DateTimeOffset.UtcNow.AddMinutes(30), // Tiempo de expiración de la cookie
                        Path = "/"
                    };
                    Response.Cookies.Append("token", resultAuthorization.Token, tokenCookieOptions);
                    // Crear y configurar la cookie de refresh token
                    var refreshTokenCookieOptions = new CookieOptions
                    {
                        HttpOnly = true,
                        Secure = true, // Se debe configurar como true si el sitio es HTTPS
                        SameSite = SameSiteMode.Strict, // O ajusta según los requisitos de seguridad
                        Expires = DateTimeOffset.UtcNow.AddHours(24 * 7), // Tiempo de expiración de la cookie
                        Path = "/"
                    };
                    Response.Cookies.Append("refreshToken", resultAuthorization.RefreshToken, refreshTokenCookieOptions);
                    return Ok();
                }
            }
            catch (Exception ex)
            {
                // Manejar otras excepciones no controladas
                throw new MethodsExceptions(StatusCod.UnprocessableContent, ex.Message, ex.InnerException.ToString());
            }
        }

De esta manera llamo el endpoint Authenticate cuando ejecuto el enpoint autenticar llegan las cookies al navegador correctamente

export const login = (credentials: authInput) => async (dispatch: any) => {
  try {
    debugger
    await axiosInstance.post(`${API_BASE_URL}/Authenticate`, credentials, { withCredentials: true });
    dispatch(setCredentials({}));
  } catch (error) {
    //Aquí podrías despachar otra acción para manejar el error
  }
};

Y luego quiero ejeutar este otro enponint que devuelve los paises como ven tiene el Authorize, lo que necesito es que obtenga el token enviado a las cookies y se envie en la solicitud

 [HttpGet]
        [Route("Countries")]
        [Authorize]
        // [Authorize(Policy = "RequireAdmin")]
        public async Task<IActionResult> GetList()
        { // Comprobar si el usuario tiene permiso de administrador
            try
            {
                var listaPaises = await Task.FromResult(new List<string> { "Colombia", "Francia", "Croacia", "Marruecos", "España" });
                return Ok(listaPaises);
            }
            catch (Exception ex)
            {
                return Unauthorized(new { message = ex.Message });
            }
            //throw new Exception("Esto es una excepción a propósito.");
        }

lo llamo de este forma desde react

const getRoles = async (): Promise<string[]> => {
    try {
      debugger
        const roleResponse = await callEndpoint(          
            GetRequests<string[]>(     
             'https://localhost:7050',
              '/v2/Testing/Tests/Countries'
            )
        );
        console.log(roleResponse.data);
        return roleResponse.data;
    } catch (error) {
      console.log(error);
  }
}

desde aca llamo las nuevas peticiones de modo generico

import axios, { AxiosRequestConfig } from "axios";
import { loadAbort } from "utilities/loadAbortAxiosUtility";
import axiosInstance from "./interceptor";

/**
 * Construye la configuración común para las solicitudes Axios con autenticación por token.
 * @param token Token del usuario de la aplicación.
 * @param additionalHeaders Opciones adicionales que se agregarán a la configuración.
 * @returns La configuración común para las solicitudes Axios.
 */
const buildCommonConfig = (additionalHeaders: Record<string, string> = {}): AxiosRequestConfig => {
    return {
        signal: loadAbort().signal,
        headers: {
            'Content-Type': 'application/json',
            ...additionalHeaders,
        },
        withCredentials: true,
    };
};

export const GetRequests = <T>(url: string, endpoint: string, id?: string) => {
    try {
        debugger
        const controller = loadAbort();
        const config = buildCommonConfig();
        const urlRequest = id ? `${url}${endpoint}/${id}` : `${url}${endpoint}`;
        console.log('Configuración de la solicitud:', config);
        return {
            call: axiosInstance.get<T>(urlRequest, config),
            controller
        };
    } catch (error) {
        debugger
        console.error('Error in GetRequest:', error);
        throw error;
    }
};

tengo este interceptor donde creo un intancia de axios y donde configuro withCredentials: true

const axiosInstance = axios.create({    
        withCredentials: true,
      });
      debugger

      axiosInstance.interceptors.response.use(
        response => {
          if (response.status === 200) { 
            // Mostrar mensaje de éxito
            console.log("¡Solicitud exitosa!");
            // Puedes usar otras opciones para mostrar el mensaje, como Toastr o notificaciones personalizadas.
          }
          return response;          
        },

    );

    export default axiosInstance;
3
  • fijate para empezar, que no sea un problema de cors...
    – gbianchi
    Commented el 21 mar. a las 22:02
  • @gbianchi no, no es un tema de cors. Commented el 22 mar. a las 14:09
  • Y que error tira al llamar al segundo endpoint?? lo que si, salvo que tengas un metodo de autorizacion propio, authorize espera la autenticacion por defecto de asp.net
    – gbianchi
    Commented el 22 mar. a las 14:48

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.