В настоящее время я пытаюсь настроить специальный компонент частного маршрута, который возвращает обычный route (), если пользователь аутентифицирован или перенаправляется на страницу входа.
Вот мой компонент PrivateRoute:
PrivateRoute.js
<imports>
...
</imports>
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
sessionStorage.getItem('auth') ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/signin',
state: { from: props.location }
}}/>
)
)}/>
)
export default PrivateRoute;
Приведенный выше код работает, но у меня возникают проблемы с моим sessionStorage. В моем sessionStorage я храню логическое значение, которое в основном обновляется каждый раз, когда пользователь входит в систему и выходит из нее. Логическое значение извлекается с сервера с помощью функции ax ios, указанной ниже:
authenticationCtrl.js
<imports>
...
</imports>
const authenticate = async () => {
let response = await axios.get('/test/login').then(res => sessionStorage.setItem('auth', res.data.isAuthenticated))
.catch(err => console.log(err));
//sets the boolean that gets updated by server when user signs - in(up)/out).
return response;
}
Я вызываю метод, указанный выше, в моем компоненте входа в систему и регистрации. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что всякий раз, когда я вхожу в систему или регистрируюсь, я все равно перенаправляюсь на страницу входа, даже если был обновлен sessionStorage.getItem ('auth'). Мне нужно go на мою страницу root, а затем получить доступ к моему частному маршруту через него или написать URL-адрес маршрута в моем браузере, чтобы получить доступ.
Signin.js
<imports>
...
</imports>
export default (props) => {
const [detail, setDetail] = useState({
username: "",
pass: "",
err: ""
});
function handleChange(event) {
const { name, value } = event.target;
setDetail(prevValue => {
return { ...prevValue, [name]: value, err: ''};
});
}
function onSubmit(event){
event.preventDefault();
const {history} = props;
login({
username: detail.username,
password: detail.pass
}, (data) => {
console.log(data);
if(data.message){ //if authenticated
history.push('/user/home');
}else {
setDetail(prevValue => {
return {...prevValue, err: 'Failed to login'}
})
}
});
authenticate(); //method from authenticationCtrl.js
}
Мне нужна помощь, как это исправить? Я хочу иметь возможность входить в систему или регистрироваться и не перенаправляться обратно на эти страницы, а иметь прямой доступ к своим PrivateRoutes.
В фоновом режиме я использую паспорт и express -сессии для безопасности. Я добавил их в качестве промежуточного программного обеспечения и использую переменную req.isAuthenticated в запросе, чтобы проверить, прошел ли пользователь аутентификацию, и обновить клиентскую сторону sessionsiosStorage.getItem ('auth') для доступа к PrivateRoutes.
Routes.js
<imports>
...
</imports>
router.route('/login')
.get((req,res) => {
res.json({isAuthenticated: req.isAuthenticated()});
})
.post(user.login); //from routeController.js renamed as user on import.
routeController.js
exports.login = (req,res) => {
const user = new User({
username: req.body.username,
password: req.body.password
});
req.login(user, (err) => {
if(err){
console.log(err);
res.json({message: false});
}else{
passport.authenticate('local', {failureRedirect: '/test/login'})(req,res, () => {
res.json({message: true});
});
}
})
}
Заранее спасибо:>