将登录的用户 ID 嵌入到表单中

Question

我使用下一步登录我的应用程序。成功登录后，您将被重定向到带有表单的仪表板。

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")

}

在该仪表板中，用户可以填写下一个表单。这很好用，表格是 posted，用户可以看到他 posted 的所有表格。

我希望用户能够共享表单 link 并嵌入了他的 ID，这样无论何时有人填写表单，您都可以将其与共享它的用户相关联。

我的问题是，无论何时有人试图填写表单，它都不会 post 因为此人未登录并且表单无法获取用户 ID，即使此人已登录，它也会传递他的 ID 和不是共享表单的人。

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");
      
    });
  };`

非常感谢有关如何嵌入 user._id 的任何帮助！

Answer 1

是的，我不认为有一种方法可以嵌入它，只是共享表单的 link 而没有进一步的参考。如果您不想直接使用用户 ID，则可以生成某种其他可用 ID，将其添加到特定表单的 URL。并将那个与 back-end 中的用户 ID 相关联。然后最后通过动态变量通过表单的页面抓取。

示例：

website.com/form/:id

并使用 props.match.params.id 路由器，或您决定的策略。

编辑：次要措辞

Answer 2

好的，这就是我所做的，我创建了 2 个组件；登录用户的一个表单，他可以正常填写它，它有一个按钮，可以重定向到一个打算共享的表单：

因此登录的用户表单如下所示：

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>

然后在要共享的表单中，我使用 react router dom 中的 useMatch 来检索用户 ID：

import { useMatch } from "react-router-dom";

const SharedForm = () => {
    const params = useMatch(`/form/:own`)
/// console.dir(params)
    const owner = params.params.own

通过这种方式，登录的用户 ID 将嵌入到表单中，任何拥有 link 的人都可以填写它。

将登录的用户 ID 嵌入到表单中

Embed a logged user id to a form

javascript

reactjs

axios