I have a problem with understanding why my app works kinda odd. When I try to reach any site on my page by clicking a link button in navbar, it navigates me there without any problems, like when I click “My account”, the URL changes to “http://localhost:3000/my_account” and everything works just fine. In this place I have to mention that “/my_account” is a protected route – user has to be logged in to reach it, when he is not logged in – he gets send to the homepage. So now the problem is that when user is logged in and tries to reach the protected route like “http://localhost:3000/my_account” by entering this URL and loading page – he is treated like a non-logged user and gets redirected to the homepage. And after he is redirected there and tries to reach this site by clicking the navbar link, he can enter this page – he is logged in. My expected result is that user can enter any URL on the site and react should check PROPRERLY if he is logged in in both cases – either when clicking a link on site or by providing a url. Can anyone tell me where do I make mistake?
UserAccount (/my_account) is a simple component:
import React, { Component } from 'react'
export class UserAccount extends Component {
render() {
return (
<div>
UserAccount
</div>
)
}
}
export default UserAccount
In router in App.js I declare this route as:
<PrivateRoute path="/my_account" exact component={UserAccount}></PrivateRoute>
And the PrivateRoute is a functional component:
import React from 'react'
import {Route, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
const PrivateRoute = ({component : Component, auth, ...rest}) => (
<Route {...rest} render={props => {
if(auth.isLoading){
return <h2>LOADING ...</h2>
}
else if(!auth.isAuthenticated){
return <Redirect to="/login"></Redirect>
}
else{
return <Component {...props}/>
}
}}></Route>
)
const mapStateToProps = state =>({
auth: state.auth
})
export default connect(mapStateToProps,null)(PrivateRoute);
My state in auth.js (reducer):
const initialState = {
access: localStorage.getItem('access'),
refresh: localStorage.getItem('refresh'),
isAuthenticated: null,
isLoading : false,
user: null,
requestSent: false,
payload: null,
message: null
}
And after successful login, state changes as follows:
switch(type){
case AUTHENTICATED_SUCCESS:
return {
...state,
isAuthenticated: true
}
case LOGIN_SUCCESS:
localStorage.setItem('access', payload.access);
return{
...state,
isAuthenticated: true,
access: payload.access,
refresh: payload.refresh
}
And login function from auth.js actions:
export const login = (email, password) => async dispatch =>{
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({email, password});
try{
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/create/`, body, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
})
dispatch(load_user());
dispatch(createMessage({logged_in_successfully: "You are now logged in."}))
} catch (err) {
dispatch({
type: LOGIN_FAIL,
payload: err
})
const errors = {msg: err.response.data, status: err.response.status}
dispatch({
type:GET_ERRORS,
payload: errors
})
}
};
Thanks for your time reading that and I am hoping for some help.
