javascript - 如何隐藏网址中的电子邮件？

Question

我正在尝试创建此注册页面，其中电子邮件显示在 url 路径中。我希望电子邮件不显示在 url 路径中。现在，我有一个电子邮件检查页面，用于检查电子邮件是否存在于数据库中。如果它不存在于 db 中，那么它会转到注册页面，用户只需输入用户名和密码，并且电子邮件已经使用 useParams 从电子邮件检查页面获取。但是我不希望电子邮件不显示在网址中，是因为props.history.push(`/register2/${email}`);？

我的代码看起来像这样。

邮件检查API调用功能

const url = "/api/emailcheck";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      console.log(text);
      if (text === "does not exist") {
        props.history.push(`/register2/${email}`);

用户输入用户名和密码的注册页面

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import { withRouter, useParams } from "react-router-dom";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  form: {
    width: "100%",
    marginTop: theme.spacing(3)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

function Reg2(props) {
  const classes = useStyles();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { email } = useParams();

  const performRegister = async event => {
    event.preventDefault();
    var body = {
      username: username,
      password: password,
      email: email
    };
    console.log(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/register";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      if (text === "verifyemail") {
        props.history.push(`/verifyOtp/${email}`);
      } else {
        window.alert("registration failed");
      }
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Enter Details
        </Typography>
        <form className={classes.form} noValidate onSubmit={performRegister}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                name="username"
                onChange={e => setUsername(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="password"
                type="password"
                onChange={e => setPassword(e.target.value)}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Register
          </Button>
        </form>
      </div>
    </Container>
  );
}
export default withRouter(Reg2);

应用程序.js

function App() {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/register" component={Reg} />
          <Route path="/register2/:email?" component={Reg2} />
          <Route path="/Editor" component={Editor} />
          <Route path="/verifyOtp/:email?" component={VerifyOTP} />
        </Switch>
      </Router>
    </>
  );
}

标签： javascriptreactjs