Авторизация SPA с маршрутизатором react

Выполните этот вопрос: авторизация маршрутизатора React

Я понимаю пример, приведенный здесь

https://github.com/ReactTraining/react-router/blob/master/examples/auth-flow/app.js

Но я думаю, что это только отвечает на вопрос аутентификации, а не авторизации. То, аутентифицируется ли пользователь или нет, зависит не только от наличия значения в местоположении, где должен быть токен jwt в локальном хранилище.

 loggedIn() {
   return !!localStorage.token
 }

Я знаю, что это будет невозможно сделать любую связь сервера, но то, что я после того, как полностью скрыть мое приложение за логином. Я не вижу, как я могу достичь этого в СПА, должен ли я разделить мою аутентификацию и остальную часть моего приложения как 2 страницы? Что делать, если я привожу роли?

1 ответ

  1. Просто передайте роль пользователя в компонент через props и выполните простую проверку, чтобы увидеть, должен ли пользователь иметь доступ к этой странице. Перенаправление (возможно на страницу 404) в противном случае.

    const UserPage = ({userType}) => {    
        if(userType.role == 'user' || userType.role == 'admin') {
            return (
                <div>Basic Page Accessed</div>
            )
        } else {
            // Redirect
        }
    }
    
    const AdminPage = ({userType}) => {    
        if(userType.role == 'admin') {
            return (
                <div>Page Accessed</div>
            )
        } else {
            // Redirect
        }
    }
    

    Конечно, это вовсе не безопасно, потому что все происходит на стороне клиента, и нет ничего, что останавливает злонамеренного/подкованного пользователя от запуска действий, которые они не должны. Именно поэтому вам также нужно использовать аутентификацию/авторизацию на вашем бэкэнде. Таким образом, вы можете думать о моем примере как о более приятной функции пользовательского интерфейса, а не фактической функции безопасности. Вы также можете использовать эту библиотеку для авторизации переднего плана, но мне кажется, что это немного много. Простое решение должно сделать трюк.

    Затем вопрос становится одним из авторизации / аутентификации API, на который хорошо ответили здесь .

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