Реагировать на проверку интерфейсных токенов для частных маршрутов. - PullRequest
Новая
       8

Реагировать на проверку интерфейсных токенов для частных маршрутов.

0 голосов
/ 16 декабря 2018

В настоящее время я рассматриваю пример аутентификации токена для приложения реагирования с экспресс-бэкендом, и я наткнулся на React + Redux - учебное пособие по аутентификации JWT и пример в блоге Джейсона Уотмора.Аутентифицируемый интерфейс при аутентификацииВ этом случае для рендеринга частного маршрута интерфейс просто проверяет наличие токена и заставляет сервер проверять свои маршруты.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    localStorage.getItem('user')
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
  )} />
)

Указанный выше код является допустимым способом визуализации частных маршрутов , поскольку он упоминает, что кто-то может вставить токен в localStorage, но сервер проверит запрос.Мой другой способ решения этой проблемы состоял в том, чтобы частный маршрут проверял токен в асинхронном режиме в функции рендеринга следующим образом: 

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(token, props) => (
    tokenAuthenticationRequest(token)
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
  )} />
)

Однако одна из проблем, с которыми я столкнулся, заключалась в том, что компонентам React необходимо использовать Suspense вПорядок загрузки асинхронных функций.

...