reactjs - 授权路线被按钮覆盖（React）

问题描述

我正在制作一个基本网站，在其中实现了基本的身份验证路线。这将获得令牌，如果用户拥有令牌，则允许他们访问他们想要的页面。这如下所示。

const AuthRoute = ({ component: Component }) => (
  <Route
    render={props =>
      token && token !== undefined ? <Component /> : <Redirect to="/" />
    }
  />
);

然后在我的 app.js 中使用它（我所有的反应路由器路由都完成了）。

 <AuthRoute
          exact
          path="/admin-center-view-users"
          component={AdminCenterViewUsers}
        />

所以本质上是说如果他们有令牌（它是我从我的快递后端分配给他们的一个 json Web 令牌）允许他们访问这条路线。这很好用，但是我正在使用我的按钮，这似乎完全忽略了我已经实现的这条路线。

这就是我完成按钮路由的方式。无论这条路线如何，这都会将它们带到页面。

 <Link to="/RouteImNotAllowedToBe"> Sign Up </Link>

解决这个问题的合乎逻辑的方法是什么？可以用链接标签做类似的事情吗？

编辑

快递后台

app.post("/login", async (req, response) => {
  try {
    await sql.connect(config);

    var request = new sql.Request();
    var Email = req.body.email;
    var Password = req.body.password;
    var AccountValidationMessage = "";
    var LastLogin = req.body.date;

    let token = "";
    let adminToken = "";
    console.log({ Email, Password });

    request.input("Email", sql.VarChar, Email);

    let result = await request.execute("dbo.CheckEmailExists");

    if (result.recordsets[0].length > 0) {
      console.info("This email exists");
      request.input("Password", sql.VarChar, Password);
      let result = await request.execute("dbo.LoginUser");

      if (result.recordsets[0].length > 0) {
        console.info("/login: login successful..");
        console.log(req.body);

        request.input("LastLogin", sql.DateTime, LastLogin);

        await request.execute("dbo.AddLastLoginToRegisteredUsers");

        let result = await request.execute("dbo.FindAdmin");
        if (result.recordsets[0].length > 0) {
          console.info("This is a admin account");
          adminToken = jwt.sign({ user: Email }, "SECRET_KEY", {
            //////
            expiresIn: 3600000 ////////
          });
        } else {
          console.info("this aint a admin account but you get a login token"); //////
          token = jwt.sign({ user: Email }, "SECRET_KEY", {
            //////
            expiresIn: 3600000 ////////
          });
        }
        var decoded = jwt.verify(adminToken, "SECRET_KEY");
        console.log(decoded);

        response.status(200).json({
          ok: true,
          user: Email,
          jwt: token,
          adminJwt: adminToken
        });
      } else {
        console.info("Incorrect Password");
        AccountValidationMessage = "Incorrecrt password to account";
        response.status(409).json({
          AccountValidationMessage: AccountValidationMessage
        });
      }
    } else {
      console.log("Email does not exists");
      AccountValidationMessage = "Email does not exists";
      response.status(409).json({
        AccountValidationMessage: AccountValidationMessage
      });
    }
  } catch (err) {
    console.log("Err: ", err);
    response.status(500).send("Check api console.log for the error");
  }
});

分配 jwt 的示例

handleSubmit(e) {
    e.preventDefault();
    if (this.state.email.length < 8 || this.state.password.length < 8) {
      alert(`please enter the form correctly `);
    } else {
      var today = new Date(),
        date = `${today.getUTCFullYear()}-${today.getUTCMonth() +
          1}-${today.getUTCDate()} ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}.${today.getMilliseconds()} `;

      const data = {
        email: this.state.email,
        password: this.state.password,
        date
      };
      console.log(date);

      fetch("/login", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json,",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          console.log("response before it is broken down " + response);

          return response.json();
        })
        .then(({ adminJwt, jwt, user, AccountValidationMessage }) => {
          console.log(
            "after it is broken down",
            jwt,
            adminJwt,
            user,
            AccountValidationMessage
          );
          window.localStorage.removeItem("registerToken");
          window.localStorage.removeItem("resetToken");
          if (jwt && user) {
            window.localStorage.setItem("myToken", jwt);
            window.localStorage.setItem("User", user);
          } else if (adminJwt && user) {
            window.localStorage.removeItem("myToken");

            window.localStorage.setItem("adminToken", adminJwt);
            window.localStorage.setItem("User", user);
          }
          if (AccountValidationMessage) {
            alert(AccountValidationMessage);
          }
        })

        .catch(error => {
          console.error("Error:", error);
        });
    }
  }

标签： reactjs

reactjs - 授权路线被按钮覆盖（React）

问题描述

解决方案

推荐阅读