Всем привет. Делаю приложение на 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
Сборка персонального компьютера от Artline: умный выбор для современных пользователей