firebase Vue JS #STEPでログイン/登録(ログイン)

プロジェクトのログイン ルートを作成しましょう。以下のこの構造に注目してみましょう。

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

index.js ファイルに次の内容を追加します:

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

ルート ファイルが大幅に充実し、ユーザーが認証されずに画面にアクセスできないように検証を作成できるように、firebase/auth インポートを追加したことに注意してください。

つまり、const ルーターの下にあるこの部分は、保護されたルートでの各ナビゲーションの前にユーザー認証をチェックします。 getCurrentUser 関数は、onAuthStateChanged メソッドを使用して認証を監視し、認証されたユーザーとの Promise を返します。 router.beforeEach では、ルートに認証が必要かどうかを確認します (meta.requiresAuth で示されます)。ルートが保護されており、ユーザーが認証されている場合は、アクセスが許可されます (next())。ユーザーが認証されていない場合は、アラートが表示され、/login にリダイレクトされます。ユーザーがすでに認証されており、/login または /cadastro にアクセスしようとすると、ホームページ (/) にリダイレクトされます。さらに、Home へのルートと /login への別のルートを追加しました。

ホームについては、ファイルを作成するつもりはありません。ユーザーがアクセスできるかどうかを確認するためにどのように機能するかを確認できるように、ファイルをそこに配置するだけです。

---

ここで、実際の登録コンポーネント、その関数、およびその呼び出しの作成に進みましょう。この構造に焦点を当てましょう。

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

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>

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 }

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>

これで、登録画面とログイン画面は完了です。この投稿では、/login にルートを追加し、router/index.js に検証を追加して、ユーザーが認証されている場合にのみホームページにアクセスできるようにします。ログイン コンポーネントを作成します。すべての最後に /login にアクセスすると、次のような画面が表示されます。

私の投稿を最後まで読んでいただきありがとうございます。これが、うまく機能させるのが難しい、または開発を始めている多くの人々に役立つことを願っています。何か問題がございましたら、お気軽にコメントください。できる限り問題を分析し、お手伝いさせていただきます。

以上がfirebase Vue JS #STEPでログイン/登録(ログイン)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。