Проверка маршрута React с помощью функции ax ios asyn c - PullRequest
Новая
       47

Проверка маршрута React с помощью функции ax ios asyn c

0 голосов
/ 01 апреля 2020

Итак, я создаю веб-приложение со стороны сервера (узел + express) и клиента (cra). У меня проблема с проверкой пользователя по токену jwt, который я установил как повар ie. Конечная точка API проверки на стороне сервера работает должным образом (протестировано с почтальоном), но проблема в том, что asyn c функция проверки, которая возвращает обещание, поэтому маршрут на самом деле не знает, проверен ли он, поскольку ответ находится на рассмотрении.

Вот конечная точка API на стороне сервера: /api/token.js

router.get('/',
    jwt({secret:'token-secret' }),
    function (req,res) {
        console.log(req);
        if(!req.user) return res.sendStatus(401);
        res.sendStatus(200);
        }
    )

, а вот приложение. js на стороне клиента: src / app. js, который обрабатывает маршрутизацию (/ панель мониторинга должна быть доступна только для проверенных пользователей) 

function App() {

    function checkToken() {
        let token = Cookies.get('Access Token')
        axios.get('http://localhost:9000/api/token', {
            headers: {
                'Authorization': `bearer ${token}`
            }
        }).then(res => {
            return res.status;
        }).catch(err => console.log(err));
    }

    const handleToken = async () => {
        const result = await checkToken();
        return result;
    }

  return (
      <BrowserRouter>
          <Route exact={true} path='/' render={() => (
              <div className="App">
                  <Home />
              </div>
          )}/>
          <Route exact={true} path='/dashboard' render={() => (
              <div className="App">
                  {console.log('checktoken log', handleToken())}
                  {checkToken() ? <Dashboard /> : <Login />}
              </div>
              )}/>
          <Route exact={true} path='/login' render={() => (
              <div className="App">
                  <Login />
              </div>
          )}/>
      </BrowserRouter>
  );
}

На данный момент я понимаю, что, возможно, мне не следует выполнять проверку таким образом, поскольку, вероятно, нет никакого способа Я могу получить возврат до рендеринга, возможно, это должно быть сделано в хуке жизненного цикла componentWillMount, но я не смог представить его в этом файле (или все должно быть сделано в совершенно другом файле).

Спасибо

ps Я пропустил все настройки импорта и экспорта по умолчанию, так как это не имеет значения

1 Ответ

0 голосов
/ 11 апреля 2020

Ну, я сделал это с парой существенных изменений. Во-первых, чтобы использовать history.pu sh, мне пришлось реорганизовать часть BrowserRouter, чтобы теперь она выглядела как это приложение. js

    render() {
        return (
            <Router history={history}>
                <Route exact path='/' component={Home} />
                <Route exact path='/dashboard'  component={Dashboard} />
                <Route exact path='/login' component={Login} />
            </Router>
        );
    }

Тогда я решил не использовать api / token. js. Вместо этой конечной точки API я создал компонент высшего порядка, который будет проверять наличие файлов cookie, установленных во время входа в систему. Часть, которая доставила мне больше всего неприятностей, - это асинхронный характер загрузки файлов cookie. Это было решено с помощью setTimeout внутри функции getCook ie, я вызывал эту функцию в жизненном цикле componentDidMount.

src / components / withAuth. js

state = {
            data: false,
            open: false,
            auth: false
        }

        componentDidMount() {
            this.getCookie();
        }

        getCookie(){
            this.setState({
                open: true,
            })
            setTimeout(() => {
                const cookie = Cookies.get('Access Token')
                if(cookie) {
                    this.setState({
                        data: true,
                        open: false,
                        auth: true
                    })
                } else if (cookie === undefined) {
                    this.setState({
                        auth: true,
                        open: false
                    })
                }
            }, 700)
        }

В конце концов, чтобы защитить маршрут, я обернул компонент HOC src / Views / Dashboard. js

import requireAuthentication from '../components/withAuth';

class Dashboard extends Component {

    render() {
        return (
            <div>
                <DashboardContent />
            </div>
        );
    }
}

export default requireAuthentication(Dashboard);
...