Всем привет. Делаю приложение на React.js, нужно сделать доступ к нему через авторизацию. Авторизацию сделал через JWT на бэке (laravel), но теперь возникла проблема с защитой всего приложения от доступа и сохранением сессии. После авторизации, сохраняю token JWT в localeStorage, но совершенно не могу понять, как при инициализации приложения, используя Redux, рендирить App, в случае если пользователь авторизован, и делать редирект на login, если нет. И помогите пожалуйста понять, как реализовать сессию через JWT и localStorage.
const Content = () => {
return (
<>
<Switch>
<Route path={"/"} render={props => <Empty {...props}/>}/>
<Route component={NotFound}/>
</Switch>
</>
)
};
const Login = () => {
return (
<>
<AuthPage/>
<Redirect to={'/login'}/>
</>
)
};
class App extends Component {
render() {
return (
<MainProvider>
<div className={"app-wrapper"}>
{console.log(this.props.session())}
<Router path={'/'} render={() => (
this.props.session() ? (
<Content/>
) : (
<Login/>
)
)}>
</Router>
</div>
</MainProvider>
);
}
}
this.props.session() это action, который получает профиль пользователя, и в случае успеха, помимо dispatch, возвращает также true.
В моем случае я делал следующим образом:
При входе в приложение брал JWT из localStorage.
токена нет - однозначно редирект на login.Если токен есть, я делал запрос к какому-то методу бэкенда (который требует JWT)
а) если сервер ответил 200 - значит токен не протух и с ним можно дальше работать
б) если сервер ответил 4xx ошибкой (обычно 401 или 403), то редирект на login
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости