Saya menggunakan nextjs dan mengalami masalah dengan otentikasi firebase. Ketika saya masuk, saya sesi disimpan di IndexedDB (saya kira), dan kemudian saya memiliki konteks yang memiliki useEffect dengan metode onAuthStateChanged, yang memperbarui pengguna ketika diubah. Katakanlah saya memiliki /login dan /dashboard (halaman pribadi), ketika login terjadi, itu akan mengirim saya ke /dashboard. Itu bekerja dengan baik. Masalah muncul ketika saya mencoba masuk ke /login (dengan mengetikkan tautan di browser, sehingga menyegarkan) tanpa keluar, yang seharusnya mengirim saya kembali ke /dasbor lagi. Alih-alih mengosongkan komponen hingga data diambil, komponen tersebut memuat laman masuk, hanya kemudian merender dasbor lagi.

  const Dashboard = dynamic(() => import('../pages/dashboard'))

  const router = useRouter()
  const { signIn, user } = useAuth()
  const { addToast } = useToast()
  const formRef = useRef<FormHandles>(null)

  useEffect(() => {
    console.log(user)
    if (!user) return
    router.replace('/login', '/dashboard', { shallow: true })
  }, [user])

Saya menggunakan dinamis untuk merender halaman secara kondisional

      return (
        <>
          {user ? (
            <Dashboard />
          ) : (
            <>
              <Head>
                <title>Login</title>
              </Head>
              <Container>
                <Content>
                  <img src={Logo} width={245} alt="Imobiliária Predial Primus" />

                  <Form ref={formRef} onSubmit={handleSubmit}>
                    <h1>Faça seu login</h1>

                    <Input name="email" placeholder="E-mail" />
                    <Input name="password" type="password" placeholder="Senha" />

                    <Button type="submit">Entrar</Button>

                    <a href="#"> Esqueci minha senha</a>
                  </Form>
                </Content>

                <Background />
              </Container>
            </>
          )}
        </>
      )

Seperti yang Anda lihat, "pengguna" adalah yang merender halaman secara kondisional, tetapi karena muncul null setiap kali halaman dimuat, masalah ini terjadi.

Ini adalah konteks Auth.tsx, yang saya bungkus di sekitar aplikasi.

    import React, {
      createContext,
      useCallback,
      useContext,
      useState,
      useEffect
    } from 'react'
    import { useRouter } from 'next/router'

    // Firebase
    import { auth } from '../config/firebase'
    import { User } from '../interfaces'

    interface SignInCredentials {
      email: string
      password: string
    }

    interface AuthContextData {
      user: User
      signIn(credentials: SignInCredentials): Promise<void>
      signOut(): void
    }

    const AuthContext = createContext<AuthContextData>({} as AuthContextData)

    const AuthProvider: React.FC = ({ children }) => {
      const router = useRouter()
      const [user, setUser] = useState(auth.currentUser)

      useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
          console.log('user', user)
          setUser(user)

          if (!user) {
            router.push('/login')
          }
        })
        return () => {
          unsubscribe()
        }
      }, [])

      const signIn = useCallback(async (data: SignInCredentials) => {
        await auth.signInWithEmailAndPassword(data.email, data.password)
      }, [])

      const signOut = useCallback(() => {
        auth.signOut()
        router.push('/login')
      }, [])

      return (
        <AuthContext.Provider value={{ user, signIn, signOut }}>
          {children}
        </AuthContext.Provider>
      )
    }

    function useAuth(): AuthContextData {
      const context = useContext(AuthContext)

      if (!context) {
        throw new Error('useAuth must be used within an AuthProvider')
      }

      return context
    }

    export { AuthProvider, useAuth }
0
NataJdaCOliveira 20 November 2020, 10:48

1 menjawab

Jawaban Terbaik

Memperbaiki penggunaan Cookie dan Halaman Berikutnya, dengan getServerSideProps

0
NataJdaCOliveira 15 Desember 2020, 03:30