Как условно визуализировать страницу в зависимости от экспресс / мс sql промежуточного отзыва - PullRequest
0 голосов
/ 15 января 2020

Я сделал приложение с полным стеком, успешно добавив регистр в БД. Как бы я условно отобразил домашнюю страницу в зависимости от правильности входа в систему?

В моем маршруте входа в систему есть оператор if, который успешно регистрирует «плохие кредиты», если они не существуют, или «login: login success ..», если это так.

Я добавил перенаправление в отправку дескриптора (это срабатывает после нажатия кнопки формы входа в систему), которая должна была срабатывать в случае успеха (технически это так, но она также определяет «успешность плохих кредитов»).

Я попытался использовать метафайлы if, но я не уверен, как использовать это с промежуточным программным обеспечением express.

логика c Я бы хотел, чтобы часть дескриптора отправки выполняла что-то вроде

if (login successful){
window.location.href = "/home";

}

else {
window.location.href = "/login";
(preferably with a alert )
}

Маршрут входа

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;

    console.log({ Email, Password });

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

    var queryString =
      "SELECT * FROM TestLogin WHERE email = @Email AND password = @Password";

      //"SELECT * FROM RegisteredUsers WHERE email = @Email AND Password = HASHBYTES('SHA2_512', @Password + 'skrrt')";

    const result = await request.query(queryString);

    if (result.recordsets[0].length > 0) {
      console.info("/login: login successful..");
      console.log(req.body);
      req.session.loggedin = true;
      req.session.email = Email;
      response.send("User logined");
    } else {
      console.info("/login: bad creds");
      response.status(400).send("Incorrect email and/or Password!");
    }
  } catch (err) {
    console.log("Err: ", err);
    response.status(500).send("Check api console.log for the error");
  }
});


 handleSubmit(e) {
    e.preventDefault();
    if (this.state.email.length < 8 || this.state.password.length < 8) {
      alert(`please enter the form correctly `);
    } else {
      const data = { email: this.state.email, password: this.state.password };

      fetch("/login", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        // .then(response => response.json())
        .then(data => {
          console.log("Success:", data);

          // if ( ) {
          //   console.log("nice");
          // } else {
          //   console.log("not nice");
          // }
          // window.location.href = "/home";
        })

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

1 Ответ

1 голос
/ 15 января 2020

Во-первых, вы должны были объяснить, что у вас есть приложение React во внешнем интерфейсе. Говоря в то же время о Express промежуточном программном обеспечении и маршруте входа немного грязно. :)

То, что вы делаете, это вход в систему / вход через API. Это означает, что ваш сервер должен вернуть JSON информацию о результатах входа в систему. Затем ваш интерфейс должен обрабатывать это так, как вы хотите. Это означает, что ваш сервер должен просто обрабатывать запрос на вход в систему как любой другой запрос данных. Верните код состояния и некоторые необязательные данные JSON.

Аутентификация - БОЛЬШАЯ тема, и поскольку вы не предоставили много подробностей, я могу только сказать вам, как обычно весь процесс должен go:

  1. Отправка учетных данных пользователя на сервер (как вы делаете в своем запросе POST)
  2. Обработка ответа, полученного от сервера. Если вход был успешным, вы должны получить некоторую информацию с сервера, такую ​​как идентификатор пользователя, адрес электронной почты, идентификатор сеанса, либо в ответе JSON data, либо по заголовкам HTTP. Вы должны хранить эту информацию во внешнем интерфейсе, обычно в localStorage, и использовать ее для каждого запроса к серверу, чтобы предоставить вашу личность. Вам нужно поискать JSON Web Tokens.
  3. В своем приложении React вы хотите при запуске приложения проверить, зарегистрирован ли пользователь в системе или нет (используя часть информации, упомянутую в шаге 2, или пытается получить конечную точку, которая возвращает информацию о пользователе, такую ​​как /me). Если у вас нет этой информации или запрос не выполнен, перенаправьте на страницу входа в систему.
  4. В приложении React на странице входа в систему обработайте результат выборки и перенаправьте на дом, если пользователь прошел проверку подлинности, или оставайтесь там. и отображать любую информацию, которую вы хотите.

Я предполагаю, что, поскольку вы используете логин пользователя, некоторые ресурсы должны быть защищены от доступа не авторизованных пользователей или ограничены в зависимости от вошедшего в систему пользователя. Это делается с помощью промежуточного программного обеспечения на вашем Express сервере, который должен проверять информацию об идентификаторе пользователя / токене / идентификаторе сеанса, которую ваше приложение React должно отправлять при каждом запросе.

Чтобы перенаправить с помощью React Router, вы не хочу использовать window.location. Вы хотите использовать сам маршрутизатор, чтобы избежать перезагрузки полной страницы. Вы можете использовать добавленную history prop в компоненте маршрута входа в систему или обернуть любой компонент, которому он нужен, withRouter HO C.

В этой статье, кажется, достаточно хорошо изложены все параметры, использующие React Router: https://serverless-stack.com/chapters/redirect-on-login-and-logout.html

Надеюсь, это поможет, это сложный вопрос, который вы должны разделить на меньшие проблемы и решать по одному. ;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...