Далее. js Пример Firebase auth - перенаправление на основе auth - PullRequest
Новая
       32

Далее. js Пример Firebase auth - перенаправление на основе auth

2 голосов
/ 01 мая 2020

Я пытаюсь использовать следующий. js с аутентификацией для небольшого проекта. Аутентификация в настоящее время работает, но не позволяет мне показывать данные в моей навигационной панели.

Я использовал ее с firebase изначально, НО НЕ БОЛЬШЕ !! Теперь настройте аутентификацию отдельно ниже.

Это пример репозитория, в нем есть мой API для аутентификации и следующего. js, который я пытаюсь объединить, чтобы войти и выйти из системы. работа с набором заголовков для вызовов API. 

https://github.com/Hewlbern/example

Просто получите базовые функции c для входа и выхода, чтобы я мог контролировать доступ пользователей к своему веб-сайту. Я знаю, что это действительно просто - просто очень запутался, как это сделать со следующим. js с тем, как работает страница документа в приложении: S

Я пытаюсь показать таблицу выходных данных этого API и дать возможность загрузки излагаемого json (в CSV или что-то еще). Таким образом, доступность этого после поиска с параметрами запроса и только на странице после входа пользователя в систему - это главное:)

Если кто-то сделал что-то подобное или знает, как решить эти проблемы, я Буду очень признателен:)

Ура!

1 Ответ

2 голосов
/ 11 мая 2020

То, что я бы порекомендовал здесь, - это создать пользовательский хук, который использует контекстный API React для того, чтобы «отслеживать» изменение состояния авторизации. Затем оберните ваше приложение в этом поставщике, и вы сможете гибко делать все что угодно с этим состоянием аутентификации, используя свой новый пользовательский хук.

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

import React, { createContext, useContext, useState } from 'react'

import { auth } from './services' // this is just firebase.auth()

const UserContext = createContext()

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(undefined)

  auth.onAuthStateChanged(setUser)

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

export const useUser = () => useContext(UserContext)

Теперь вам просто нужно обернуть ваше приложение в UserProvider.

Примерно так: 

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import App from './app'
import { UserProvider } from './hooks'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <UserProvider>
        <App />
      </UserProvider>
    </BrowserRouter>
  </StrictMode>,
  rootElement
)

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

Что-то вроде этого будет делать: 

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom'

import { useUser } from './hooks'

const LoginPage = () => {
  const history = useHistory()
  const user = useUser() // user is undefined if not logged in

  useEffect(() => {
    if (user) { // will run the condition if user exists
      history.push('/')
    }

  }, [user])

  ...
}

Вы можете go на самом деле использовать user данные на панели навигации, используя что-то вроде этого: 

import React from 'react'
import { Link } from 'react-router-dom'

import { useUser } from './hooks'

const NavBar = () => {
  const user = useUser()

  return (
    <div>
      {user ?
        <Link to="/profile">Welcome, {user.displayName}</Link> :
        <Link to="/login">Login</Link>
      }
    </div>
  )
}

Очевидно, вы можете изменить это для нас в соответствии со своими потребностями, но все это должно получить вы идете с тем, как работать с состоянием аутентификации в чистой надежной манере.

...