'Remember me functionality with react js
I am developing a login page using react js, I want to add a remember me checkbox, I'm trying to set the value of the checkbox in localStorage, and in my AppContent file, I implement my condition if the checkbox is true, redirect me to the login page else redirect me to the dashboard. Can anyone give me some idea why this is not working for me?
Login.js
const handleSubmit = () => {
let items = { email, password }
let body = JSON.stringify(items)
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json',
};
axios.post(`****/api/login`, body, { headers })
.then(response => {
{ checked ? localStorage.setItem('check', true) : localStorage.setItem('check', false) }
localStorage.setItem('tokenLod', response.data.token);
localStorage.setItem('loginLod', true);
history.push('/')
})
.catch(error => {
console.log("error", error)
})
}
<Form.Check
required
label="Souviens-toi de moi"
feedback="You must agree before submitting."
value={checked}
onChange={() => setChecked(!checked)}
/>
AppContent.js
const AppContent = () => {
return (
<CContainer lg>
<Suspense fallback={<CSpinner color="primary" />}>
<Switch>
{routes.map((route, idx) => {
return route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props =>
(localStorage.getItem('tokenLod') && localStorage.getItem('loginLod'))
? (
<route.component {...props} />
) : (
<Redirect to={{ pathname: "/login" }} />
)
}
/>
) : null;
})}
localStorage.getItem('check') === true ?
<Redirect to={{ pathname: "/login" }} /> :
<Redirect to={{ pathname: "/dashboard" }} />}
</Switch>
</Suspense>
</CContainer>
)
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
