vue 结合amazon coginto完成登录注册的完整代码

Vue.js结合Amazon Cognito完成登录注册功能涉及到前端UI、路由管理和后端认证服务集成。由于这是一个较为复杂的主题，包括前端框架的配置、Amazon Cognito API的理解以及API Gateway的设置，下面提供一个简化的概述和代码片段示例，但请注意这只是一个基础的指导，并非完整的代码。

首先，确保已经安装了Vue CLI并创建了一个项目：

vue create my-project

然后，你需要安装相关的依赖库，如axios用于发送HTTP请求到后端：

npm install axios

接下来，在`src/router`文件夹里，你可以创建登录和注册页面的路由：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Register from '@/views/Register.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

在`src/components`目录下创建Login.vue和Register.vue组件，处理用户输入并调用Cognito的API：

<!-- Login.vue -->
<template>
  <div>
    <!-- ... 登录表单内容 ... -->
    <button @click="handleSubmit('login')">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSubmit(action) {
      // 使用axios发起请求
      axios.post('/api/auth', { username: this.username, password: this.password }, { headers: { 'x-amz-cognito-authentication-provider': 'username_password', 'x-amz-user-pool-id': '<your_user_pool_id>' } })
        .then(response => {
          // 登录成功后跳转或其他处理
        })
        .catch(error => {
          console.error('Login error:', error);
        });
    }
  }
}
</script>

对于Register.vue，你可以类似地处理表单提交，只是不需要包含验证密码匹配等步骤，因为Amazon Cognito通常会处理用户的密码安全。

在服务器端，你可能需要使用AWS Amplify库来简化Cognito的集成：

// server-side (using AWS Amplify)
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const cognito = Amplify.Cognito();

// 用户注册函数
async function signUp(username, password) {
  try {
    const result = await cognito.signUp({ username, password });
    // 注册成功的逻辑
  } catch (error) {
    console.error('Sign up error:', error);
  }
}

// 用户登录函数
async function signIn(username, password) {
  try {
    const result = await cognito.signIn({ username, password });
    // 登录成功的逻辑
  } catch (error) {
    console.error('Sign in error:', error);
  }
}

记得替换上述代码中的`<your_user_pool_id>`为你在Amazon Cognito中实际创建的应用的User Pool ID。