Понять, как работает аутентификация в приложении React.
Безопасность является важной частью приложения. При разработке приложения вы никогда не хотите, чтобы неавторизованные/не прошедшие проверку подлинности лица получали доступ к страницам вашего веб-сайта. В этой статье мы обсудим, как реализовать аутентификацию (вход, регистрация и выход) в вашем приложении React.
Понять JWT
Прежде чем начать с части внешнего интерфейса, давайте разберемся, что происходит в бэкэнде, когда пользователь отправляет форму входа/регистрации.
После отправки запроса на вход в серверный API наши учетные данные проверяются, а при успешном входе в систему нам отправляется ответ с идентификатором пользователя и зашифрованным токеном. Этот токен — это то, что мы называем веб-токеном JSON, через который мы можем отправлять запросы на Backend API для доступа к защищенным маршрутам, а затем сервер расшифровывает токен, сравнивает идентификатор пользователя с допустимым или нет и отправляет ответ.
Информация в JWT имеет цифровую подпись с использованием секретного или открытого/закрытого ключей.
Вы можете прочитать больше о JWT на https://jwt.io/
Основы функций аутентификации
Давайте создадим пользовательский хук, который предоставит нам данные пользователя и методы аутентификации — вход, регистрация и выход.
После успешного входа в систему и регистрации мы получаем токен, который затем сохраняем в объекте пользователя. Этот токен позже будет использоваться для защищенных запросов API в заголовках.
Для сохранения данных добавьте пользовательский хук локального хранилища.
const [user, setUser] = useLocalStorage("user", null);
Контекст аутентификации
Чтобы сделать пользователя доступным глобально для приложения, добавьте Context. Мы создаем контекст, который использует вышеуказанный пользовательский хук и оборачивает его вокруг корневого компонента, чтобы сделать все методы и состояния доступными глобально для приложения.
Если вы не знаете, как настроить контекст, прочитайте мою предыдущую статью о контексте, в которой представлен пошаговый подход к настройке контекста.
Шаг 1. Создайте контекст аутентификации
const AuthContext = createContext()
Шаг 2. Настройте получателя, абстрагировав хук useContext.
const useAuthContext = () => useContext(AuthContext)
Шаг 3. Настройте провайдера с помощью компонента более высокого порядка. Теперь здесь мы используем созданный нами пользовательский хук и добавляем его внутрь провайдера, как показано ниже.
const AuthProvider = ({children}) => {
const auth = useAuth()
return <AuthContext.Provider value={auth}>
{children}
</AuthContext.Provider>
}
Шаг 4. Оберните поставщик вокруг корневого компонента, чтобы сделать его глобально доступным для всех компонентов.
<Authprovider> <App /> </AuthProvider>
Окончательный код будет выглядеть так
Требовать компонент аутентификации для защиты маршрутов
В веб-приложении маршруты можно разделить на два типа: общедоступные маршруты и защищенные маршруты. Защищенные маршруты требуют аутентификации пользователя, чтобы быть доступными, в то время как общедоступные маршруты не имеют таких условий.
Как разместить условие, которое проверяет, аутентифицирован ли пользователь или нет?
Это так же просто, как поставить условие if и вернуть компонент или перенаправить для входа в систему, как показано ниже.
const user = AuthContext()
if(user){
// Return Component
}
else{
// Navigate to Login
}
Но я не хочу писать это условие внутри каждого компонента, которому требуется аутентификация, поэтому я использую компонент более высокого порядка — RequireAuth, который принимает компонент в качестве входных данных и возвращает защищенный компонент.
Например, есть компонент профиля пользователя, который требует аутентификации пользователя, тогда мы обертываем компонент, как показано ниже:
<Route path='/profile' element={<RequireAuth><UserProfile /></RequireAuth>} />
Перенаправление после входа
Как перенаправить пользователя после авторизации. На многих веб-сайтах мы видим, что когда неавторизованный пользователь пытается войти в систему, мы перенаправляем его на страницу входа, но как после завершения входа мы перенаправляем обратно на ту же страницу?
В нашем приложении до сих пор, когда пользователь, не прошедший проверку подлинности, пытается получить доступ к защищенной странице, мы перенаправляем его на страницу входа в систему. Но после того, как он / она успешно войдет в систему, что произойдет дальше?
Помните, как мы сделали AuthContext оберткой вокруг корневого компонента, что заставляет любое изменение состояния в AuthContext повторно отображать весь компонент приложения, следовательно, когда пользователь входит в систему, состояние пользователя изменяется, поэтому нам просто нужно вернуться к пользователю после состояние изменено в функции входа в систему.
«Но что, если я скажу вам, что у меня есть лучшее решение вместо того, чтобы переходить на эту страницу»
Во-первых, мы обновляем Require Auth, чтобы сохранить текущий путь в состоянии навигации, как показано ниже.
Теперь нам нужен способ получить это состояние, которое будет содержать путь, об этом позаботится react-router-dom с помощью функции useLocation.
Когда компонент перерисовывается с обновленным пользовательским значением, мы перенаправляем пользователя со страницы входа с помощью компонента Navigate на путь, хранящийся в состоянии, с помощью хука useLocation из react-router-dom, как показано ниже.
На этом завершается функция аутентификации нашего веб-приложения. Спасибо, что дочитали до конца, и я надеюсь, что эта статья была полезной. Подписывайтесь на меня, чтобы получать больше таких статей!
