[Перевод] Аутентификация пользователя в React (управление состоянием входа)

React.js
[Перевод] Аутентификация пользователя в React (управление состоянием входа)

[Перевод] Аутентификация пользователя в React (управление состоянием входа)

исходный адрес:Кент CD odds.com/blog/AU тогда…

Эта статья в основном показывает в настоящее времяReactКак использовать в разработке приложенийContextа такжеHooksДля управления аутентификацией пользователя (т.е. состоянием входа).

Вывод первый

Вот упрощенная версия этой статьи в конечном итоге реализована для облегчения прямых бигмиков, чтобы увидеть окончательные результаты:

import React from 'react'
import {useUser} from './context/auth'
import AuthenticatedApp from './authenticated-app'
import UnauthenticatedApp from './unauthenticated-app'
function App() {
  const user = useUser()
  return user ? <AuthenticatedApp /> : <UnauthenticatedApp />
}
export App

Ну, последний код выглядит так.наиболее

import React from 'react'
import {useUser} from './context/auth'
const AuthenticatedApp = React.lazy(() => import('./authenticated-app'))
const UnauthenticatedApp = React.lazy(() => import('./unauthenticated-app'))
function App() {
  const user = useUser()
  return user ? <AuthenticatedApp /> : <UnauthenticatedApp />
}
export App

дорогой, кодленивая загрузкаЭто достигается: когда незалогиненный пользователь посещает нашу страницу, будет загружен только код, который отображает незарегистрированный интерфейс; когда авторизованный пользователь посещает ту же страницу, будет загружен только код, который отображает вошедший в систему интерфейс.

ОсобенноAuthenticatedAppа такжеUnauthenticatedAppРазработчик сам решает, какой интерфейс отображать. Может быть, они сделают некоторыеrouter, и даже повторно использовать некоторые общие компоненты. Неважно, какой именно рендеринг, нам не нужно заботиться о статусе входа пользователя, потому что, когда один из этих двух компонентов визуализируется, статус входа пользователя уже известен.

Как реализовать приведенную выше логику шаг за шагом

Если вы хотите увидеть окончательную реализацию всего APP, вы можете перейти кэтот гитхабПроверить.

Хорошо, давайте посмотрим, как реализовать вышеуказанную логику шаг за шагом. Во-первых, давайте посмотрим на вступительный код нашего приложения:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import AppProviders from './context'
ReactDOM.render(
  <AppProviders>
    <App />
  </AppProviders>,
  document.getElementById('root'),
)

НижеAppProvidersКод компонента:

import React from 'react'
import {AuthProvider} from './auth-context'
import {UserProvider} from './user-context'
function AppProviders({children}) {
  return (
    <AuthProvider>
      <UserProvider>{children}</UserProvider>
    </AuthProvider>
  )
}
export default AppProviders

Хорошо, у нас есть дваProvider: Одним из них является состояние аутентификации приложений технического обслуживания; другой - поддерживать данные текущего входа в систему. По словам литерала,AppProviderlocalStoragetoken, то мы можем напрямуюtokenчтобы получить некоторые пользовательские данные). с другой стороны,UserProviderОтвечает за синхронизацию некоторых наших изменений в пользовательских данных (таких как адреса электронной почты, резюме и т. д.) с сервером.

Полный auth-context.jsСодержит некоторую логику, не относящуюся к теме данной статьи, поэтому давайте взглянем на упрощенную версию.auth-context.js:

import React from 'react'
import {FullPageSpinner} from '../components/lib'
const AuthContext = React.createContext()
function AuthProvider(props) {
  // 如果我们还不确定当前用户是否登录，比如还在请求后端接口查询登录状态，
  // 那么我们就渲染一个全局的加载中，而不是加载真正的页面组件
  if (weAreStillWaitingToGetTheUserData) {
    return <FullPageSpinner />
  }
  const login = () => {} // make a login request
  const register = () => {} // register the user
  const logout = () => {} // clear the token in localStorage and the user data
 
  // 注意：这里我并没有使用 `React.useMemo` 来优化 provider 的 `value`。
  // 因为这是我们应用里最顶级的组件，很少会在这个顶级组件上触发 重新render
  return (
    <AuthContext.Provider value={{data, login, logout, register}} {...props} />
  )
}
const useAuth = () => React.useContext(AuthContext)
export {AuthProvider, useAuth}
// user-context.js 文件里的 `UserProvider` 大概长这样：
// const UserProvider = props => (
//   <UserContext.Provider value={useAuth().data.user} {...props} />
// )
// and the useUser hook is basically this:
// const useUser = () => React.useContext(UserContext)

Ключевыми моментами для упрощения управления аутентификацией в нашем приложении являются:

Компонент, отвечающий за поддержание состояния входа пользователя, не будет отображать основное содержимое страницы до тех пор, пока не будет получено текущее состояние входа пользователя, но может отображать глобальную загрузку загрузки. Только когда статус входа пользователя получен с сервера, отображается основная часть страницы: компоненты, вошедшие в систему, отображаются, если вы вошли в систему;

В заключение

В реальном развитии многие приложения сталкиваются с разными сценариями. Если вы используете технологию рендеринга бокозна серверов (SSR), то вам, вероятно, не нужна загрузочная нагрузка, потому что вы уже явно знаете на сервере, вошел ли текущий пользователь в систему. Даже в этом случае статус входа пользователя также может быть повышен до глобального.ProviderДля управления это повысит ремонтопригодность нашего кода.

PS:

Некоторые одноклассники задавали один и тот же вопрос: если наше приложение, авторизованные пользователи и незалогиненные пользователи видят много одного и того же интерфейса (типа твиттера), не то что gmail, авторизованные пользователи и незалогиненные пользователи видят совершенно разные, как мы должны поддерживать статус входа пользователя?

Если это так, то будет использоваться много компонентов кода.useUseruseIsAuthenticatedbooleanЗначение, которое указывает, вошел ли текущий пользователь в системе. благодаряContextа такжеHooks

Категории