Uso el siguiente para el inicio de sesión de mi aplicación. Cuando inicia sesión con éxito, se le redirige a un panel con un formulario.
async function loginUser(e) { e.preventDefault() await Axios.post("http://localhost:3005/users/login", { email, password }).then((response) => { if (!response.data.auth){ setSession(null) } else{ setSession(response.data.token, response.data.user) } }); }; export const getUser = () =>{ const user = sessionStorage.getItem("user"); if(user) return JSON.parse(user); else return null; } export const getToken = () => { return sessionStorage.getItem("token") || null } export const setSession = (token, user) => { sessionStorage.setItem("token", token) sessionStorage.setItem("user", JSON.stringify(user)) } export const removeSession = () => { sessionStorage.removeItem("token") sessionStorage.removeItem("user") }En ese tablero el usuario puede llenar el siguiente formulario. Esto funciona bien, los formularios se publican y el usuario puede ver todos los formularios que publicó.
Quiero que el usuario pueda compartir el enlace del formulario con su identificación incrustada, de modo que cada vez que alguien complete el formulario, pueda asociarlo con el usuario que lo compartió.
Mi problema es que cada vez que alguien intenta completar el formulario, no se publica porque la persona no ha iniciado sesión y el formulario no puede obtener una identificación de usuario, e incluso si la persona inició sesión, pasaría su identificación y no la de la persona que compartió el forma.
const Form = () => { const user = getUser(); const [firstName, setFirstName] = useState(); const [middleName, setMiddleName] = useState(); const [surname, setSurname] = useState(); const [secondSurname, setSecondSurname] = useState(); const [email, setEmail] = useState(); const [contactNumber, setContactNumber] = useState(); const createForm = () => { Axios.post("http://localhost:3005/forms", { firstName, middleName, surname, secondSurname, email, contactNumber, ownerUser: user._id }).then((response) => { alert("Form sent"); }); };`¡Agradecemos profundamente cualquier ayuda sobre cómo incrustar el user._id!
Sí, no creo que haya una manera de incrustarlo simplemente compartiendo el enlace del formulario sin más referencias. Podría generar algún tipo de ID utilizable que pueda agregar a la URL del formulario específico, si no desea usar la ID del usuario directamente. Y asocie ese al ID de usuario en el back-end. Luego, finalmente, tómelo a través de la página del formulario a través de la variable dinámica.
Ejemplo:
website.com/form/:id
Y usando props.match.params.id con Router, o su estrategia decidida.
Ediciones: redacción menor
Bien, aquí está lo que hice, creé 2 componentes; un formulario para el usuario registrado, puede completarlo normalmente y tiene un botón que redirige a un formulario que está destinado a ser compartido:
Entonces, el formulario de usuario registrado se ve así:
const Form = () => { const user = getUser(); const own = user._id; const navigate = useNavigate(); const nav = (own) => { navigate(`/form/${own}`) } /// states, axios and the form <button onClick={createForm}>Send</button> <button onClick={() => nav(own)} >Go to</button>Luego, en el formulario para compartir, utilicé useMatch de react router dom de la siguiente manera para recuperar la identificación del usuario:
import { useMatch } from "react-router-dom"; const SharedForm = () => { const params = useMatch(`/form/:own`) /// console.dir(params) const owner = params.params.ownDe esta manera, la identificación del usuario registrado se incrusta en el formulario y cualquier persona con el enlace puede completarlo.