ChatGPT + SORA = CloseAI [005.2] Login之数据要存上

本文章视频版：https://youtu.be/x44TvbMt89k

CloseAI

把 AI 的能力集成在一起，打造一个工具流系统，免费给牛哥的粉丝使用
把这个过程做成视频并发布到Youtube，通过youtube的收益支撑系统的费用

“关注牛哥” 订阅频道不迷路：
https://www.youtube.com/channel/UCFbNqDV1vY7S-eih_eC0OAQ?sub_confirmation=1
牛哥官网：https://niugee.com/

定义数据结构

• email ：邮箱类型
• password ：存储一个加密格式

定义API

添加一个用来和后端接口通讯的接口文件，myLoginAPI.ts

这里只作为示例，直接调用的数据断的CURD接口，实际工程中我们会添加一个中间层处理相关逻辑，不会直接暴露数据到UI（下一个视频的内容）

import axios from "axios";
const VITE_API_BASE_URL = import.meta.env.VITE_API_BASE_URL;  

export const loginAPI = async(email, password) => {
 try {
  // 使用axios调用API
  const response = await axios.get(VITE_API_BASE_URL+'/api/my-users', {
   params: {
    filters: {
     email: {
      $eq: email
     }
    }
   }
  });  

  console.log(response.data);
  const user = response.data.data[0].attributes || {};
  console.log(user);

 } catch (error) {
  return false
 }
};

跳转authStore的结构

authStore是存储及响应用户登录后的相关信息的数据，代码如下：

  async loginWithEmailAndPassword(email: string, password: string) {
   try {
    const response = await loginAPI( email, password );
    // 假设API响应的数据结构是 { isLoggedIn: boolean, user: Object }
    //this.isLoggedIn = response.data.isLoggedIn;
    //this.user = response.data.user;
    //this.profile = response.data.profile;  

    this.isLoggedIn = false;

    return this.isLoggedIn;
    // 可以在这里调用其他actions或者直接修改状态
   } catch (error) {
    // 处理错误，例如设置错误状态或者显示错误信息
    console.error('Login failed:', error);
   }
  },

修改SigninPage.vue

在登录按钮的点击函数里，调用authStore的登录函数

const handleLogin = async () => {
 try {
  const { valid } = await refLoginForm.value.validate();
  if (valid) {
   isLoading.value = true;
   isSignInDisabled.value = true;

   const res = await authStore.loginWithEmailAndPassword(
      email.value, password.value);
   if (res){
    router.push("/");
   } else {
    errorProvider.value = true;
    errorProviderMessages.value = t("login.error");
   }  

   isLoading.value = false;
   isSignInDisabled.value = false;
  } else {
   console.log("no");
  }
 } catch (error) {
  snackbarStore.showErrorMessage( t("login.error") );
 }
};

小结

最后联调测试，完成了相关效果
后续继续对API进行正规化调用中间层，并将用户的一些处理逻辑放入中间层后，完成登录的整体流程。