使用 Vuex 管理状态
Vuex 是一个状态管理库，它提供了一个集中存储来帮助管理 Vue 应用程序中的组件。在目录中创建一个store.js文件，src并将以下代码添加到文件中：
import { createStore } from 'vuex'
const store = createStore({
})
// export the store
export default store
首先，我们定义将包含一个user对象的状态，该对象包含有关登录用户的信息：
state: {
user: {
loggedIn: false,
data: null
}
},
该loggedIn属性的默认值为false，是一个布尔值，它告诉我们用户是否已通过身份验证。该data属性保存有关登录用户的信息：
getters: {
user(state){
return state.user
}
},
在Vuex 中，getter 通常提供一种访问存储在状态中的数据的方法。我们定义了一个简单的 getter 调用，它从状态user中返回user对象：
mutations: {
SET_LOGGED_IN(state, value) {
state.user.loggedIn = value;
},
SET_USER(state, data) {
state.user.data = data;
}
}
突变允许我们改变我们的状态；在这里，我们定义了两个突变。第一个是SET_LOGGED_IN，它将loggedIn属性设置为传递state.user给value它的 。SET_USER更改 上的data属性state.user：
actions: {
async register(context, { email, password, name}){
const response = await createUserWithEmailAndPassword(auth, email, password)
if (response) {
context.commit('SET_USER', response.user)
response.user.updateProfile({displayName: name})
} else {
throw new Error('Unable to register user')
}
},
async logIn(context, { email, password }){
const response = await signInWithEmailAndPassword(auth, email, password)
if (response) {
context.commit('SET_USER', response.user)
} else {
throw new Error('login failed')
}
},
async logOut(context){
await signOut(auth)
context.commit('SET_USER', null)
},
async fetchUser(context ,user) {
context.commit("SET_LOGGED_IN", user !== null);
if (user) {
context.commit("SET_USER", {
displayName: user.displayName,
email: user.email
});
} else {
context.commit("SET_USER", null);
}
}
}
动作类似于突变，但它们不是改变状态，而是提交突变。 为了简化流程，我们将在操作中定义所有用于身份验证的操作，然后我们将在方法中分派它们。
register`操作通过传入我们要在 Firebase 上注册的用户的电子邮件和密码来使用`createUserWithEmailAndPassword()`方法。`firebase.auth()
我们不需要散列密码，因为 Firebase 会自动处理。如果注册成功，我们调用返回updateProfile()的对象上的方法，user将 name 字段与user. 否则，我们会为错误抛出异常，然后将其显示给用户。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
该logIn操作使用与注册操作相同的逻辑()，但使用不同的方法signInWithEmailAndPassword()。
该logout()操作使用该signOut()方法，然后将用户状态更新为null。该fetchUser操作接受用户作为参数以根据其当前值更新状态。
在 Firebase 中注册用户
让我们看看我们如何注册用户并将他们的详细信息存储在 Firebase 上。src/components/Register.vue使用以下代码进行编辑：
Register{{error}}
在标签中，我们创建了一个用于注册用户的简单引导表单。表单中的每个输入字段都在setup()Composition API 的 Hook中定义。提交表单时，Register会调用该函数，该函数处理用户在 Firebase 上的实际注册。
为了进一步了解发生了什么，让我们Register详细看一下该函数：
const Register = async () => {
try {
await store.dispatch('register', {
email: email.value,
password: password.value,
name: name.value
})
router.push('/')
}
catch (err) {
error.value = err.message
}
}
在该submit()方法中，firebase.auth()让我们可以访问我们的默认应用程序的身份验证服务。
接下来，我们调用createUserWithEmailAndPassword()，传入我们要在 Firebase 上注册的用户的电子邮件和密码。分享几个我私藏的找软件网站，包含了电脑、安卓、mac几大类，都是直接下载无套路！我们不需要对密码进行哈希处理，因为 Firebase 会自动处理。
由此，我们定义了一个异步函数 ，Register它从存储和电子邮件中分派Register操作，然后将密码和名称作为有效负载传递。如果成功，用户将被重定向到仪表板页面。否则，错误将显示在页面中。
登录用户
接下来，让我们学习如何允许用户登录。继续并Login.vue使用以下代码编辑我们之前创建的组件：
Login{{error}}
Login.vue组件类似于Register.vue组件。表单中的每个输入字段都在setup()Composition API 的 Hook 中定义。当用户提交表单时，该Login函数被调用，处理用户在 Firebase 上的实际注册：
const Login = async () => {
try {
await store.dispatch('logIn', {
email: email.value,
password: password.value
})
router.push('/')
}
catch (err) {
error.value = err.message
}
}
创建Dashboard组件
接下来，我们将定义一个简单的仪表板视图，其中包含一个引导警报，通知用户他们已成功登录，显示用户配置文件，并显示注销按钮。将以下代码添加到src/components/Dashboard.vue文件中：
Welcome, {{user.data.displayName}}You are logged in!You are not logged in!
使用onAuthStateChanged()观察者，我们可以fetchUser()在用户成功通过身份验证时调度操作：
auth.onAuthStateChanged(user => {
store.dispatch("fetchUser", user);
});
使用计算属性，我们可以轻松地从 store getter 更新用户对象：
const user = computed(() => {
return store.getters.user;
});
然后在仪表板页面上显示用户的个人资料信息。
注销用户
在Dashboard.vue组件中，我们定义了一个signOut()函数。该函数从商店分派logout操作，然后将其重定向回登录页面：
const signOut = async () => {
await store.dispatch('logOut')
router.push('/login')
}
结论
在本教程中，我们学习了如何使用 Firebase 支持的电子邮件和密码提供程序设置简单的身份验证系统。Firebase 是提高应用程序安全性的绝佳工具，正如您所见，Firebase 身份验证非常易于使用。