如何解决如何使用react-cookies在Formik中保存登录访问令牌?
我正在学习React,并且希望使用 Formik 进行登录和注销,而不是基本的html表单。我正在使用 react-cookies 保存在后台实现的登录访问令牌。
首先,我使用基本的 html表单创建了,效果很好,但我找不到集成到 Formik 的方法。目前,登录似乎可以使用,因为状态代码为200 ,但它不会保存在 cookies 中。我还想使用 react-cookies 创建注销功能,该功能应在单击按钮时删除令牌。
如何解决?
这是React-Formik的组成部分
import React,{ useState } from 'react'
import { useCookies } from 'react-cookie'
import {
Formik,Form,Field,ErrorMessage,} from 'formik'
import * as Yup from 'yup'
function Login() {
const [data,setData] = useState([])
const [cookies,setCookie,removeCookie] = useCookies(['my-cookies'])
const saveLogin = (values) => {
fetch('http://localhost:8000/user/logIn',{
method: 'POST',headers: {
'Content-Type': 'application/json',},body: JSON.stringify({
email: values.email,password: values.password,}),})
.then((res) => res.json())
.then((result) => {
setData(result)
setCookie('auth-token',result)
console.log(values)
})
.catch((err) => console.log('error'))
}
const initialValues = {
email: '',password: ''
}
const oonSubmit = (values,{ setCookie,setSubmitting }) => {
setSubmitting(true);
saveLogin(values,setCookie);
setSubmitting(false)
console.log(values)
}
const validationSchema = Yup.object({
password: Yup.string().required('required'),email: Yup.string()
.email('Invalid email format').required('required'),})
const logout = () => {
removeCookie('auth-token')
}
return (
<>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={oonSubmit}
>
{({ values,isSubmitting }) => (
<Form >
<div>
<label htmlFor='email'>E-mail</label>
<Field
type='text'
id='email'
name='email'
/>
<ErrorMessage name='email' />
</div>
<div >
<label htmlFor='password'>password</label>
<Field
type='password'
id='password'
name='password'
/>
<ErrorMessage name='password' />
</div>
<button type='submit'>login</button>
</Form>
)}
</Formik>
<form>
<button type="submit" onClick={(e) => logout(e,removeCookie)}>
logout
</button>
</form>
</>
)
}
export default Login
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。