我們來創(chuàng)建項(xiàng)目登錄路由，下面重點(diǎn)關(guān)注這個結(jié)構(gòu)。

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

在index.js 文件中，我們將添加以下內(nèi)容：

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

請注意，現(xiàn)在，我們的路由文件更加完整，我們添加了 firebase/auth 導(dǎo)入，以便我們可以創(chuàng)建驗(yàn)證，以便用戶在未經(jīng)身份驗(yàn)證的情況下無法訪問屏幕。

簡而言之，常量路由器下的這部分在每次在受保護(hù)的路線上導(dǎo)航之前檢查用戶身份驗(yàn)證。 getCurrentUser 函數(shù)使用 onAuthStateChanged 方法來監(jiān)視身份驗(yàn)證并返回經(jīng)過身份驗(yàn)證的用戶的承諾。在router.beforeEach中，它檢查路由是否需要身份驗(yàn)證（由meta.requiresAuth指示）。如果路由受到保護(hù)并且用戶經(jīng)過身份驗(yàn)證，則允許訪問（next()）。如果用戶未通過身份驗(yàn)證，則會顯示警報(bào)并重定向到 /login。如果用戶已經(jīng)通過身份驗(yàn)證并嘗試訪問 /login 或 /cadastro，則會將其重定向到主頁 (/)，此外，我們添加了一條到 Home 的路由和另一個到 /login 的路由。

關(guān)于主頁，我不會創(chuàng)建該文件，我只是將其放在那里，以便您可以看到它如何檢查用戶是否可以訪問。

現(xiàn)在，讓我們繼續(xù)創(chuàng)建實(shí)際的注冊組件、它的函數(shù)和調(diào)用，所以讓我們重點(diǎn)關(guān)注這個結(jié)構(gòu)。

.
├── 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，我們將驗(yàn)證添加到 router/index.js，以便用戶只有通過身份驗(yàn)證才能訪問主頁，并且我們創(chuàng)建登錄組件，在一切結(jié)束時，訪問 /login 您應(yīng)該看到類似于下面的屏幕：

感謝您閱讀我的文章直到最后，我希望這可以幫助許多遇到困難或開始發(fā)展的人。如果您有任何問題，請隨時發(fā)表評論，只要有可能，我會分析您的問題并盡力幫助您。

以上是使用 firebase Vue JS 登錄/注冊#STEP（登錄）的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！