Connectez-vous/inscrivez-vous avec Firebase Vue JS #STEP (connexion)

Créons la route de connexion du projet, concentrons-nous sur cette structure ci-dessous.

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

Dans le fichier index.js, nous ajouterons ce qui suit :

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

Notez que maintenant, notre fichier de route est beaucoup plus complet, nous avons ajouté l'import firebase/auth afin de pouvoir créer des validations afin que l'utilisateur ne puisse pas accéder aux écrans sans être authentifié.

En bref, cette partie située sous le routeur const vérifie l'authentification des utilisateurs avant chaque navigation sur des itinéraires protégés. La fonction getCurrentUser utilise la méthode onAuthStateChanged pour surveiller l'authentification et renvoie une promesse avec l'utilisateur authentifié. Dans router.beforeEach, il vérifie si la route nécessite une authentification (indiquée par meta.requiresAuth). Si la route est protégée et que l'utilisateur est authentifié, elle autorise l'accès (next()). Si l'utilisateur n'est pas authentifié, il affiche une alerte et redirige vers /login. Si l'utilisateur est déjà authentifié et tente d'accéder à /login ou /cadastro, il le redirige vers la page d'accueil (/), de plus, nous avons ajouté une route vers Accueil et une autre vers /login.

À propos de Home, je ne vais pas créer le fichier, je l'ai juste mis là pour que vous puissiez voir comment cela fonctionnera pour vérifier si l'utilisateur peut ou non y avoir accès.

---

Maintenant, passons à la création de notre composant d'enregistrement proprement dit, ses fonctions et son appel, concentrons-nous donc sur cette structure.

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

fichier formLogin.vue.

<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 class="text-center mb-3">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
          @click:append-inner="controller.showPassword.value = !controller.showPassword.value"
          :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
          "
          @click="controller.login"
        >
          Entrar
        </v-btn>

        <br />

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

        <div class="d-flex justify-center mt-3">
          <button @click="controller.signInWithGoogle">
            <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>

fichier loginController.js.

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 }

Fichier Login.vue.

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

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

Et avec cela, nous terminons nos écrans d'inscription et de connexion, dans cet article nous ajoutons la route vers /login, nous ajoutons des validations à router/index.js afin que l'utilisateur ne puisse accéder à la page d'accueil que s'il est authentifié et nous créons le composant de connexion, à la fin de tout, en accédant à /login, vous devriez voir un écran similaire à celui ci-dessous :

Je vous remercie d'avoir lu mon post jusqu'au bout, j'espère que cela aidera beaucoup de personnes qui ont du mal à le faire fonctionner ou qui commencent à se développer. Si vous rencontrez des problèmes, n'hésitez pas à commenter et chaque fois que je peux, j'analyserai votre problème et j'essaierai de vous aider.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!