Creación de una tienda de comercio electrónico. Comenzó con los productos, que no requieren autenticación para extraer, pero sí requieren autenticación para editar. Esto está funcionando bien, y sospecho que es porque esto está sucediendo en el cliente que envía información de autenticación con todas las solicitudes directamente desde el cliente (es decir, gancho de métodos).
Sin embargo, los datos del pedido requieren autenticación para acceder a cualquiera de ellos. No puedo acceder a esta ruta para generar la página usando asyncData. Sospecho que esto se debe a que está sucediendo en el servidor Nuxt en lugar del cliente.
async asyncData({ $config: { apiURL } }) { let orders = await axios.get( `${apiURL}/orders` ); return { orders: orders.data.data }; },¿Cuál es la forma correcta de hacer esto? ¿Establecer un punto de datos vacío y luego usar montado o creado para extraer y configurar?
Actualización: lo tengo funcionando como un método, pero luego tienes que presionar el botón para obtener todas las órdenes, eso es bastante malo, jajaja, ¿qué haces?
Una solución alternativa sería
<template> <section> <div v-for="user in users" :key="user.id"> {{ user.name }} </div> </section> </template> <script> export default { async asyncData({ $axios, $config: { jsonPlaceholder } }) { const fetchedUsers = await $axios.$get(`${jsonPlaceholder}/users`) return { users: fetchedUsers } }, data() { return { users: [], } }, } </script> Esto está usando el marcador de posición JSON como ejemplo, en su caso, puede agregar data adicionales como lo hizo inicialmente.
Esta solución tiene la ventaja de bloquear el procesamiento de la página hasta que se realiza la llamada ( mounted() no puede).
Lo tengo funcionando, esto es lo que hice:
data: () => ({ orders: [] }), mounted() { this.$axios.$get(`${this.$config.apiURL}/orders`).then( res => { this.orders = res.data }) },Déjame saber si hay una mejor manera de ir