как предотвратить несанкционированный доступ пользователя к странице, используя реакционный маршрут

Question

Я работаю над приложением React с машинописным текстом и хотел бы запретить доступ к некоторым страницам для неаутентифицированных пользователей.

Пока у меня есть это:

import { Redirect, Route, RouteProps } from 'react-router'

export interface ProtectedRouteProps extends RouteProps {
  isAuthenticated: boolean
  isAllowed: boolean
  restrictedPath: string
  authenticationPath: string
}

export const ProtectedRoute = (props: ProtectedRouteProps) => {
  let redirectPath = ''
  if (!props.isAuthenticated) {
    redirectPath = props.authenticationPath
  }
  if (props.isAuthenticated && !props.isAllowed) {
    redirectPath = props.restrictedPath
  }

  if (redirectPath) {
    const renderComponent = () => <Redirect to={{ pathname: redirectPath }} />
    return <Route {...props} component={renderComponent} render={undefined} />
  } else {
    return <Route {...props} />
  }
}

export default ProtectedRoute

Для некоторых причина: Typescript выдает некоторые ошибки компиляции в следующих строках:

  if (redirectPath) {
    const renderComponent = () => <Redirect to={{ pathname: redirectPath }} />
    return <Route {...props} component={renderComponent} render={undefined} />
  } else {
    return <Route {...props} />
  }

Redirect показывает: (псевдоним) класс Перенаправление импорт Ошибка перенаправления при синтаксическом анализе: ожидается '>'.

redirectPath показывает: const redirectPath: любой элемент привязки 'redirectPath' неявно имеет тип 'any'

Маршрут в остальном stm показывает: Левая часть арифметики c Операция должна иметь тип 'any', 'number', 'bigint' или enum type.ts (2362)

update: мой пакет. json не имеет response-router, но имеет response-router-dom это может быть проблемой?

Answer 1

Ваш файл называется ProtectedRoute.ts или ProtectedRoute.tsx? Я попытался запустить ваш код, и когда я переименовал свой файл с типом файла .tsx, ошибки исчезли.

Re package. json response-router-dom - правильный пакет, который вам нужен. Реактивный маршрутизатор используется под колпаком реактивного маршрутизатора.

Также убедитесь, что вы используете npm i @types/react-router-dom