Я делаю вход в систему реагировать с nodejs. Когда вы входите в систему, приложение сохраняет файл cookie httponly в nodejs, но у меня возникают некоторые проблемы, когда я пытаюсь его восстановить. Это мой редуктор, где я вызываю getCookie ():
export const AuthReducer: React.Reducer<AppState, Action> = (state, action) => {
switch (action.type) {
case 'setIsAuthenticated':
return { User: state.User, isAuthenticated: action.payload };
case 'setUser':
return { User: action.payload, isAuthenticated: true };
case 'getUser':
getCookie();
return { User: state.User, isAuthenticated: state.isAuthenticated };
case 'login':
return { User: action.payload, isAuthenticated: true };
case 'logout':
return { User: AuthInitialState.User, isAuthenticated: AuthInitialState.isAuthenticated };
default:
throw new Error()
}
};
А вот getCookie (), который вызывает API, чтобы получить cookie и проверить учетные данные:
export const getCookie = async () => {
await axios.post('/api/getCookie')
.then(res => {
if(res.data.token && res.data.token !== undefined) {
const user:User = jwtDecode(res.data.token);
axios.post('/api/checkSign', {id: user.id, firma: user.sign})
.then(response => {
if (response.data.find) {
dispatch({type: 'setUser', payload: user});
console.log(user);
}else{
destroyCookie();
}
})
}else{
destroyCookie();
}
});
};
Я предположил, что все работает нормально, но когда браузер обновляется в «PrivateRoute», он не находит аутентификацию, и я думаю, что проблема в том, что React отрисовывает его перед установкой аутентификации. Вот мой код маршрута:
const Routes = () => {
let [user] = useGlobalState('User');
let [isAuthenticated] = useGlobalState('isAuthenticated');
return (
<MDBContainer>
<BrowserRouter>
<header>
<Header/>
</header>
<div id="home">
<Switch>
...
<PrivateRoute path="/user" user={user} auth={isAuthenticated} component={DetalleUsuario}/>
<Redirect to="/"/>
</Switch>
</div>
<Footer/>
</BrowserRouter>
</MDBContainer>
)
};
const PrivateRoute = ({component: Component, user, auth, ...rest}: PrivateRouterProps) =>{
return(
<>
<Route {...rest} render={(props) => (
user && auth === true
? <Component {...props} />
: <Redirect to='/login'/>
)}/>
</>
)
};
И код приложения, когда я вызываю 'getUser' в редукторе отправки:
const App = () => {
useEffect(() => {
const getAuth = async () => {
await dispatch({type: 'getUser'});
};
getAuth();
}, []);
};
Кто-нибудь может мне помочь?