react-token-auth
react-token-auth copied to clipboard
Published
20 hours ago •
obabichev
obabichev
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in SignIn (at PublicRoute.js:24)
import React, { useContext } from 'react'
import ConfigContext from '../../providers/Config/Context'
import { Route, Redirect, useHistory} from 'react-router-dom'
function PublicRoute({ component: Component, redirectTo = '/', ...rest }) {
const { appConfig } = useContext(ConfigContext)
const { auth } = appConfig || {}
const { useAuth } = auth || {}
const [isAuthorised] = useAuth()
const history = useHistory()
let _location = history.location
if (isAuthorised) {
if (_location.state && _location.state.from) {
redirectTo = redirectTo === '/' ? _location.state.from.pathname : redirectTo
}
}
return (
<Route
{...rest}
render={(props) =>
/* тут ошибка */ !isAuthorised ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: redirectTo,
search: `from=${props.location.pathname}`,
state: { from: props.location },
}}
/>
)
}
/>
)
}
export default PublicRoute
не знаю как профиксить ошибку, строка с ошибкой помечена комментарием /* тут ошибка */. Все продолжает работать, но, ошибка красным текстом в консоли не даёт мне покоя. Нужно наверное что-то сделать на странице SignIn в useEffect.
После того, как я успешно авторизуюсь, меня переводит на домашнюю страницу и тогда я имею эту ошибку в консоли
//import { saveAuthorisation, isAuthorised } from '../../utils/auth'
import { useIntl } from 'react-intl'
import Page from '../../containers/Page/Page'
import React, { useState, useContext, useRef, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Paper, Button, Typography, TextField, Link, Box } from '@material-ui/core'
import ConfigContext from '../../providers/Config/Context'
import MenuContext from '../../providers/Menu/Context'
import ReCAPTCHA from "react-google-recaptcha";
import OnlineContext from '../../providers/Online/Context'
const useStyles = makeStyles((theme) => ({
paper: {
width: 'auto',
marginLeft: theme.spacing(3),
marginRight: theme.spacing(3),
[theme.breakpoints.up(620 + theme.spacing(6))]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto'
},
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`
},
avatar: {
margin: theme.spacing(1),
width: 192,
height: 192,
color: theme.palette.secondary.main,
},
form: {
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
container: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: `100%`,
},
}))
const SignIn = () => {
const isOnline = useContext(OnlineContext)
const [message, setMessage] = useState(false);
const [hasError, setError] = useState(false);
const [isLoading, setLoading] = useState(false);
const recaptchaRef = useRef({});
const classes = useStyles()
const intl = useIntl()
const { appConfig } = useContext(ConfigContext)
const { login, key } = appConfig.auth;
const [credentials, setCredentials] = useState({
username: '',
password: ''
});
const [changes, setChanges] = useState(false);
const { setAuthMenuOpen } = useContext(MenuContext)
const onChange = ({ target: { name, value } }) => {
setChanges(true)
setCredentials(Object.assign(Object.assign({}, credentials), { [name]: value }));
};
const putError = (msg) => {
setError(true);
setMessage(msg);
}
const resetMsg = () => {
setError(false);
setMessage("");
}
const resetCa = () => {
if (recaptchaRef && recaptchaRef.current && recaptchaRef.current.reset) {
recaptchaRef.current.reset()
}
}
const verifyCallback = function (value) {
if (!changes) { setLoading(false); return; }
//try {
fetch('./api/Auth/authenticate', {
method: 'post',
headers: {
'Content-Type': 'application/json',
'g-recaptcha-response': value
},
body: JSON.stringify(credentials)
})
.then(response => {
if (response.status === 202) {
resetMsg()
return response.json()
}
else {
return Promise.reject(response)
}
})
.then(token => {
authenticate(token);
}).catch((e) => {
if (e.status === 400) {
putError("Вы не прошли валидацию reCAPTCHA, попробуйте снова")
}
else if (e.status === 401) {
putError("Неправильное имя пользователя или пароль")
}
else if (e.status === 555) {
putError("Служба каталогов недоступна. Пожалуйста, обратитесь к администратору сети")
}
else if (e.status > 401) {
putError("Ошибка авторизации")
}
setLoading(false)
resetCa();
setChanges(false)
});
//} catch (e) {
// putError("Ошибка авторизации")
// setLoading(false)
// resetCa();
// resetMsg();
// setChanges(false)
// throw e
//}
};
const onSubmit = (event) => {
resetMsg();
if (event) {
event.preventDefault();
}
setLoading(true)
try {
recaptchaRef.current.execute()
} catch (e) {
console.error('onSubmit', e);
}
}
const authenticate = (token) => {
login(token)
setAuthMenuOpen(false)
setLoading(false)
resetCa();
setChanges(false)
resetMsg();
}
return (
<Page pageTitle={intl.formatMessage({ id: 'sign_in' })} isLoading={isLoading}>
<Paper className={classes.paper} elevation={6}>
<div className={classes.container}>
<Typography component="h1" variant="h5">
{intl.formatMessage({ id: 'sign_in' })}
</Typography>
<form className={classes.form} onSubmit={onSubmit}>
<ReCAPTCHA
ref={recaptchaRef}
size="invisible"
sitekey={key}
onChange={verifyCallback}
/>
<TextField
value={credentials.username}
onInput={onChange}
variant="outlined"
margin="normal"
required
fullWidth
id="username"
label={intl.formatMessage({ id: 'username' })}
name="username"
autoComplete="username"
autoFocus
disabled={isLoading || !isOnline}
/>
<TextField
value={credentials.password}
onInput={onChange}
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label={intl.formatMessage({ id: 'password' })}
type="password"
id="password"
autoComplete="current-password"
disabled={isLoading || !isOnline}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isLoading || !isOnline}>
{intl.formatMessage({ id: 'sign_in' })}
</Button>
<Box visibility={hasError ? 'visible' : 'hidden'} color='error.main' fontSize={12} align="justify">
{message}
</Box>
<Box color="text.disabled" fontSize={12} align="justify">
Этот сайт защищен reCAPTCHA и Google.<br />
<Link underline="hover" color="textSecondary" href="https://policies.google.com/privacy"> Политика конфиденциальности </Link>,
применяются <Link color="textSecondary" underline="hover" href="https://policies.google.com/terms"> Условия использования </Link>.
</Box>
</form>
</div>
</Paper>
</Page>
)
}
export default SignIn
эта ошибка возникает один раз, когда я впервые авторизуюсь временно пришлось отказаться от хука useAuth в пользу isLoggedIn()
Hello @UseMuse if you have solved the problem please guide me through...I also get same error and now no other page in my application opens up due to this error... Thanks in advance.
@Tooluloope @naishal @obabichev
make a reproduction on codesandbox
https://codesandbox.io/s/react-material-ui-forked-jvl0h look at the error in the console