Anmelden/Registrieren mit Firebase Vue JS #STEP (Anmeldung)

Lassen Sie uns die Anmelderoute für das Projekt erstellen. Konzentrieren wir uns auf diese Struktur unten.

.
├── src
│   └── router
│       └── index.js

In der Datei index.js fügen wir Folgendes hinzu:

import { createRouter, createWebHistory } from 'vue-router'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import Login from '@/module/login/view/login.vue'
import Register from '@/module/register/view/register.vue'
import Home from '@/module/home/view/home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/cadastro',
      name: 'Register',
      component: Register
    }
  ]
})

const getCurrentUser = () => {
  return new Promise((resolve, reject) => {
    const removeListener = onAuthStateChanged(
      getAuth(),
      (user) => {
        removeListener()
        resolve(user)
      },
      reject
    )
  })
}

router.beforeEach(async (to, from, next) => {
  const currentUser = await getCurrentUser()

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (currentUser) {
      next()
    } else {
      alert("Você não tem acesso a essa página, por favor, autentique-e!")
      next('/login')
    }
  } else if (
    currentUser &&
    (to.path === '/login' || to.path === '/cadastro'
  ) {
    next('/')
  } else {
    next()
  }
})

export default router

Beachten Sie, dass unsere Routendatei jetzt viel vollständiger ist. Wir haben den Firebase/Auth-Import hinzugefügt, damit wir Validierungen erstellen können, sodass der Benutzer nicht auf die Bildschirme zugreifen kann, ohne authentifiziert zu sein.

Kurz gesagt, dieser Teil unterhalb des Const-Routers überprüft die Benutzerauthentifizierung vor jeder Navigation auf geschützten Routen. Die Funktion getCurrentUser verwendet die Methode onAuthStateChanged, um die Authentifizierung zu überwachen und ein Versprechen mit dem authentifizierten Benutzer zurückzugeben. In router.beforeEach wird geprüft, ob die Route eine Authentifizierung erfordert (angezeigt durch meta.requiresAuth). Wenn die Route geschützt ist und der Benutzer authentifiziert ist, erlaubt sie den Zugriff (next()). Wenn der Benutzer nicht authentifiziert ist, wird eine Warnung angezeigt und zu /login weitergeleitet. Wenn der Benutzer bereits authentifiziert ist und versucht, auf /login oder /cadastro zuzugreifen, wird er zur Startseite (/) weitergeleitet. Außerdem haben wir eine Route zur Startseite und eine weitere zu /login hinzugefügt.

Über Home werde ich die Datei nicht erstellen, sondern nur dort ablegen, damit Sie sehen können, wie es funktioniert, um zu überprüfen, ob der Benutzer Zugriff hat oder nicht.

---

Jetzt gehen wir zur Erstellung unserer eigentlichen Registrierungskomponente, ihrer Funktionen und ihres Aufrufs über. Konzentrieren wir uns also auf diese Struktur.

.
├── src
│   └── module
│       └── login
|           └── component
|               └── formlogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue

formLogin.vue-Datei.

<template>
  <div class="d-flex justify-center align-center fill-height">
    <v-card class="mx-auto px-6 py-8" max-width="400" min-width="300">
      <v-form :disabled="controller.loading.value" :readonly="controller.loading.value">
        <h1 id="Entrar">Entrar</h1>
        <v-text-field class="mb-2" label="E-mail" variant="underlined" clearable :rules="[controller.regras.required, controller.regras.validEmail]" v-model="controller.email.value"></v-text-field>

        <v-text-field label="Senha" placeholder="Informe sua senha" variant="underlined" clearable :append-inner-icon="controller.showPassword.value ? 'mdi-eye' : 'mdi-eye-off'" :type="controller.showPassword.value ? 'text' : 'password'" :rules="[
            controller.regras.required,
            (v) => (v && v.length >= 6) || 'A senha deve ter no mínimo 6 caracteres'
          ]" v-model="controller.password.value"></v-text-field>

        <p v-if="controller.errMsg.value" class="text-red text-center">
          {{ controller.errMsg.value }}
        </p>

        <br>

        <v-btn color="#5865f2" size="large" type="submit" variant="elevated" block :loading="controller.loading.value" :disabled="
            !controller.password.value ||
            controller.password.value.length < 6 ||
            controller.loading.value
          ">
          Entrar
        </v-btn>

        <br>

        <v-divider class="mx-10"></v-divider>

        <div class="d-flex justify-center mt-3">
          <button>
            <v-avatar :image="logoGoogle"></v-avatar>
          </button>
        </div>

        <p class="text-center mt-5">
          Ainda não possui uma conta? <a href="/cadastro">Cadastre-se</a>
        </p>
      </v-form>
    </v-card>
  </div>
</template>

<script setup>
import logoGoogle from '../../../assets/images/imagem_logo_google.png'

const { controller } = defineProps({
  controller: { type: Object, required: true }
})
</script>

loginController.js-Datei.

import { ref } from 'vue'
import {
  getAuth,
  signInWithEmailAndPassword,
  GoogleAuthProvider,
  signInWithPopup,
} from 'firebase/auth'
import { useRouter } from 'vue-router'

const loginController = () => {
  const email = ref('')
  const password = ref('')
  const errMsg = ref('')
  const loading = ref(false)
  const showPassword = ref(false)
  const regras = {
    required: (v) => !!v || 'Obrigatório',
    validEmail: (v) => {
    if (v.length > 0) {
      const pattern =
        /^(([^()[\]\.,;:\s@"]+(\.[^()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return pattern.test(v) || 'E-mail inválido'
    }

    return true
  },
  const router = useRouter()
  const auth = getAuth()

  // Essa função é responsável por realizar o login com o firebase apenas informando o e-mail e senha
  const login = async () => {
    try {
      loading.value = true
      errMsg.value = ''

      await signInWithEmailAndPassword(auth, email.value, password.value)

      router.push('/')
    } catch (error) {
      // Note que aqui, temos um switch/case com os possíveis erros que o firebase retorna, essa variável `errMsg` está lá no `formLogin.vue` para que o usuário possa ver o erro que está retornando
      switch (error.code) {
        case 'auth/invalid-email':
          errMsg.value = 'E-mail inválido!'
          break
        case 'auth/user-not-found':
          errMsg.value = 'Usuário não encontrado!'
          break
        case 'auth/wrong-password':
          errMsg.value = 'Senha incorreta!'
          break
        default:
          errMsg.value = 'E-mail ou senha incorretos!'
          break
      }
    } finally {
      loading.value = false
    }
  }

  // Essa função é responsável por realizar o login com o firebase utilizando o provedor Google
  const signInWithGoogle = async () => {
    try {
      loading.value = true

      const provider = new GoogleAuthProvider()
      await signInWithPopup(auth, provider)

      router.push('/')
    } catch (error) {
      alert(error)
    } finally {
      loading.value = false
    }
  }

  return {
    email,
    password,
    errMsg,
    loading,
    showPassword,
    regras,
    login,
    signInWithGoogle
  }
}

export { loginController }

Login.vue-Datei.

<template>
  <form-login :controller="controller"></form-login>
</template>

<script setup>
import { loginController } from '../controller/loginController'
import FormLogin from '../component/formLogin.vue'
const controller = loginController()
</script>

Und damit schließen wir unsere Registrierungs- und Anmeldebildschirme ab, in diesem Beitrag fügen wir die Route zu /login hinzu, wir fügen Validierungen zu router/index.js hinzu, sodass der Benutzer nur dann auf die Homepage zugreifen kann, wenn er authentifiziert ist und Wir erstellen die Login-Komponente. Am Ende sollten Sie beim Zugriff auf /login einen Bildschirm sehen, der dem folgenden ähnelt:

Ich danke Ihnen, dass Sie meinen Beitrag bis zum Ende gelesen haben. Ich hoffe, dass dies vielen Menschen hilft, die Schwierigkeiten haben, es zum Laufen zu bringen, oder die gerade anfangen, sich zu entwickeln. Wenn Sie Probleme haben, zögern Sie bitte nicht, einen Kommentar abzugeben. Wann immer ich kann, werde ich Ihr Problem analysieren und versuchen, Ihnen zu helfen.

Das obige ist der detaillierte Inhalt vonAnmelden/Registrieren mit Firebase Vue JS #STEP (Anmeldung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!