Как не показывать страницы веб-приложения, когда пользователь не вошел в систему, и он пытается получить доступ к страницам только с URI в Reactjs - PullRequest
Новая
       14

Как не показывать страницы веб-приложения, когда пользователь не вошел в систему, и он пытается получить доступ к страницам только с URI в Reactjs

0 голосов
/ 25 марта 2020

Это базовый c вопрос, который я думаю для всех вас, но я только начал разработку веб-приложений с Reactjs, и сейчас хочу реализовать это.

Когда я искал это на net появилось предложение по реализации Защищенных маршрутов . Но что является стандартом де-факто, который мы можем использовать в производстве для реализации такого потока аутентификации?

Сценарий: если пользователь не вошел в систему, и он напрямую пытается получить доступ к одной из страниц, напрямую поместив его URL в браузер, например: http://localhost: 3000 / chainpre-order -monitoring он должен быть перенаправлен на страницу 403 (страница не авторизована). и там должна быть кнопка, чтобы перевести его на страницу входа.

Ответы [ 3 ]

0 голосов
/ 25 марта 2020

Во-первых, вы должны создать API на бэкэнде, который будет проверять персонал аутентификации и возвращать токен. Как только человек заходит на запрещенную страницу, вы должны отправить запрос на получение бэкэнда и получить токен (или другим способом). Если токен недействителен (это обычно проверяется на бэкэнде), вы должны вернуть следующее: (перенаправление на страницу входа) 

render() {
    if (!this.state.loggedIn) return (
        <Redirect to='/login' />
    )

    // otherwise return smth else
0 голосов
/ 25 марта 2020

У вас есть два сценария ios

=> Доступ к защищенному маршруту во внешнем интерфейсе, для этого реагирующего маршрутизатора защищенные маршруты - это чистый способ сделать это

=> Доступ к неавторизованному API Call, чтобы правильно обработать это, я обычно создаю метод API Caller, который я использую, чтобы ловить несанкционированные ошибки и направлять пользователя на авторизованную страницу из внешнего интерфейса. Код будет зависеть от вашей имплантации, но это пример для GET с использованием AX IOS

import Axios from 'axios';

export const get = (url, params, callback) => {
    Axios
        .get('/api/get/' + url, {
            params: params
        })
        .then((result) => {
            callback(result);
        }).catch((error) => {
            // your error handler routing to your error page
        })
}
0 голосов
/ 25 марта 2020

вам нужно создать HOC, который обернет ваш App компонент и содержит пользовательские данные, внутри этого компонента HO C вы должны проверить componentDidUpdate, если пользователь вошел в систему или (в другими словами) если у вас есть какие-либо пользовательские данные в избыточном или в вашем состоянии, и если у вас их нет, вы можете перенаправить пользователя на один из ваших опубликованных c маршрутов с history.push('/somepublicRoute'), например, логином или чем-то еще! *

...