Сессия в React.js + Redux + JWT

86
01 сентября 2021, 16:30

Всем привет. Делаю приложение на 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.

Answer 1

В моем случае я делал следующим образом:

При входе в приложение брал JWT из localStorage.

  • Если токена нет - однозначно редирект на login.
  • Если токен есть, я делал запрос к какому-то методу бэкенда (который требует JWT)

    а) если сервер ответил 200 - значит токен не протух и с ним можно дальше работать

    б) если сервер ответил 4xx ошибкой (обычно 401 или 403), то редирект на login

READ ALSO
Как получить ответ со страницы ajax и вывести его без перезагрузки страницы?

Как получить ответ со страницы ajax и вывести его без перезагрузки страницы?

Учу js, выдумываю задачи, зациклилась на одной, очень хочется послушать знающий людей)) Есть форма с одним полем ввода - промокодВвожу промокод...

317
Как сделать на странице автоматическое срабатывание элемента?

Как сделать на странице автоматическое срабатывание элемента?

Как сделать на странице автоматическое срабатывание элемента button onclick, при выборе в select-е определенного значения и сохранение его на другой...

116
Как сгенерировать файл docx в браузере на клиенте?

Как сгенерировать файл docx в браузере на клиенте?

Есть ли библиотека с помощью которой можно генерировать файлы docx на клиенте, без node js

131
Переключение блоков на другие блоки когда мишка внизу блока

Переключение блоков на другие блоки когда мишка внизу блока

Доброе время суток !!!э html которая состоит с 4 блоков как сделать что когда мышка подходит к низу блока сразу бросало на следующий нижний блок,...

80