Получение параметров и установка параметров в качестве аргумента в запросе на выборку в useEffect Hook - PullRequest
Новая
       47

Получение параметров и установка параметров в качестве аргумента в запросе на выборку в useEffect Hook

0 голосов
/ 29 мая 2020

Я разрабатываю приложение MERN. В настоящее время я работаю над своими письмами для сброса пароля, проверкой ResetToken, сбросом и обновлением пароля. Пока что мне удалось выполнить все на бэкэнде.

Во внешнем интерфейсе я выполнил запрос ForgotPassword, который отправляет пользователю письмо с токеном сброса.

Проблема сейчас в том, что мне не удалось получить токен во внешнем интерфейсе.

В моем бэкенде restPassword: 

userRouter.get('/reset/:token', (req, res) => {
    User.findOne({
        resetPasswordToken: req.params.token,
        resetPasswordExpires: { $gt : Date.now() },
    }).then((user) => {
      if (user == null) {
        console.error('password reset link is invalid or has expired');
        res.status(403).json({message : {msgBody : "password reset link is invalid or has expired", msgError: true}});
      } else {
        res.status(200).send({
          username: user.username,
          resetPasswordToken: user.resetPasswordToken,
          message: {msgBody : "password reset link a-ok", msgError: true},
        });
      }
    });
  });

При тестировании с таким действующим URL-адресом я получаю правильный ответ

enter image description here

На моем интерфейсе мой маршрутизатор настроен следующим образом 

function App() {

    return (
        <div className="App">
            <Router >
                <Switch>
               
          ...

                    <UnPrivateRoute
                    path="/forgotPassword"
                    component={ForgotPassword} />

                    <UnPrivateRoute
                    path="/reset/:token"
                    component={ResetPassword} />

                    <UnPrivateRoute
                    path="/login"
                    component={Login} />
          ...
               </Switch>

            </Router>
        </div>
    );

}


export default App;

Я пытаюсь получить параметр (токен), добавленный к пути (http://localhost: 3000 / reset / c25d7b114e99e8720761732eb1670a3d0a084877 ) в электронном письме, отправленном на пользователь, поэтому я могу использовать его в моем запросе на выборку, но пока не могу.

Консольный журнал моих данных ответа имеет статус 401 (Response {type: "basi c", url: "http://localhost: 3000 / user / reset /", перенаправлено: false, status: 401, ok: false,…})

Вот мой код. Мы будем очень благодарны за любое действительное решение. Спасибо 

const ResetPassword = props => {
 
  var url = new URL('http://localhost:3000/user/reset/?'); 
  var token = new URLSearchParams(url.search);

  useEffect(()=>{
    fetch('http://localhost:3000/user/reset/'+ token).then(data =>{
      console.log(data);
    });
   
  },[token]);



  });
  return (
   <>
    </>
  );
}

export default ResetPassword;

1 Ответ

0 голосов
/ 29 мая 2020

Итак, немного покопавшись, я получил ответ:

Первое, что мне нужно было сделать, это обновить мои «response-router» и «react-router-dom».

From Как я понял, для этого вам нужна как минимум версия 5.1.2.

Также убедитесь, что вы используете одну и ту же версию для обеих зависимостей.

Итак, в моем случае у меня есть обновлено до

"response-router": "5.2.0", "react-router-dom": "5.2.0",

Следующее, что я сделал, это импортировал {useLocation , useHistory, useParams} из response-router-dom; 

import React, {useState,useRef,useEffect} from 'react';
import { useLocation, useHistory ,  useParams} from 'react-router-dom';




const ResetPassword = props => {
  let { token } = useParams()
  console.log(token);
  const history = useHistory();
  const location = useLocation();
  console.log(location);
 

  useEffect(()=>{

    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    console.log(currentPath);
    console.log(searchParams)
    
   
  },[location]);








  });
  return (
    <>
     
    </>
  );
}

export default ResetPassword;

В моем маршрутизаторе у меня есть маршрут для страницы, установленный таким образом 

                    <UnPrivateRoute
                    path="/reset/:token"
                    component={ResetPassword} />

Таким образом, текущий URL-адрес браузера http://localhost: 3000 / reset / ab4794396674412e00406beda674349400c1f5ad

на консоли, как зарегистрировано выше. У меня следующие результаты. console.log (токен); результат: ab4794396674412e00406beda674349400c1f5ad

console.log (расположение); Результат: {путь: "/ reset / ab4794396674412e00406beda674349400c1f5ad", поиск: "", ha sh: "", состояние: undefined}

console.log (currentPath); Результат: / reset / ab4794396674412e00406beda674349400c1f5ad

console.log (searchParams); Результат: URLSearchParams {append: function, delete: function, get: function,…}

...