Нужно реализовать авторизацию в приложении.
Что нужно сделать:
1)Установить локальный сервер рядом с папкой проекта и запустить его
2)Сделать страницу регистрации пользователя. Когда пользователь успешно пройдет валидацию формы и нажмет кнопку сабмит отправится запрос на локальный сервер который вернет ответ с токеном, который я сохраню в localstorage
3)Если валидация была успешная сделать редирект на страницу Home
4)Cделать страницу логинизации которая делает аналогичный редирект
5)Cделать кнопку Logout которая будет делать редирект на страницу логинизации
Первые два пункта я сделал, вот часть файла SignupForm.js:
const SignupForm = () => {
const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({
initialValues: {
/.......
},
validateOnBlur: false,
validateOnchange: false,
validationSchema: yup.object().shape({
/.......
}),
onSubmit: async (formValues) => {
console.log('submit', formValues);
setSubmitting(true);
try {
const res = await api('api/auth/register', {
method:'POST',
body: JSON.stringify(formValues)
});
const token = res.token.token;
localStorage.setItem('myToken', token);
console.log('Result!',token);
} catch(e) {
console.error(e);
} finally {
setSubmitting(false);
}
},
});
return (
<form className="fform" onSubmit={handleSubmit}>
/........
<button type="submit" disabled={isSubmitting}>Submit Form</button>
</form>
);
};
Думал как реализовать редирект на страницу Home.js после успешной валидации
И придумал такую идею:
1)создать компоненту SignupForm свое состояние с помощью хука useState и создать в нем свойство registration:" " - тоесть с пустой строкой будет false
2)Прописать в onSubmit сменить состояние на registration: token - тоесть при отправке submit я в state ложу мою переменную token что хранит токент который вернул сервер, и свойство уже true
3) Прописать условие if cвойство registration true тогда Redirect to="/home" else Redirect to="/registration"
4) А для кнопки logout создать функцию которая будет удалять из localstorage токен и соответственно свойство registration будет false
Но проблема в том что я не знаю как реализовать это на практике потому-что перемення token доступна только в методе onSubmit в блоке try и соотвественно я не смогу ее положить в состояние. Подскажите пожалуйста как реализовать это на практике? Или лучше каким-то другим способом реализовать? Если да то подскажите как?
P.S. Нужно обязательно использовать Formik
Вот сандбокс моего проекта:
https://codesandbox.io/s/flamboyant-neumann-hwj1t
В папке public/data я создал файл data.json где написал ответ который дает мне мой локальный сервер после отправки формы.
Простой