Чтобы создать приложение Vue с помощью AWS Amplify, выполните следующие действия:
- Установите интерфейс командной строки AWS Amplify. Интерфейс командной строки AWS Amplify — это инструмент командной строки, который позволяет создавать ресурсы AWS Amplify и управлять ими. Вы можете установить его, выполнив следующую команду:
npm install -g @aws-amplify/cli
- Создайте новый проект Vue: используйте интерфейс командной строки Vue, чтобы создать новый проект Vue, выполнив команду
vue create my-app
. - Установите библиотеку AWS Amplify для Vue: запустите
npm install aws-amplify-vue
, чтобы установить библиотеку AWS Amplify для Vue. - Настройте интерфейс командной строки AWS Amplify. Запустите
amplify configure
, чтобы настроить интерфейс командной строки AWS Amplify с вашими учетными данными AWS. - Инициализируйте проект AWS Amplify. Запустите
amplify init
, чтобы инициализировать проект AWS Amplify в своем приложении Vue. Вам будет предложено указать имя проекта, среду и другие параметры. - Добавить аутентификацию: запустите
amplify add auth
, чтобы добавить аутентификацию в ваше приложение. Это создаст пул пользователей Amazon Cognito и позволит пользователям входить и регистрироваться в вашем приложении. - Добавьте другие сервисы AWS. Вы можете использовать интерфейс командной строки Amplify для добавления в свое приложение других сервисов AWS, таких как хранилище, API и аналитика. Например, вы можете запустить
amplify add storage
, чтобы добавить корзину S3 для хранения файлов, илиamplify add api
, чтобы создать шлюз API и функцию Lambda. - Добавьте Amplify в свой проект Vue: в main.js импортируйте библиотеку Amplify и настройте ее в соответствии с настройками вашего приложения. Примером этого является:
import Amplify, * as AmplifyModules from 'aws-amplify-vue' import { AmplifyPlugin } from 'aws-amplify-vue' Vue.use(AmplifyPlugin, AmplifyModules)
9. Используйте компоненты Amplify Vue. Вы можете использовать компоненты Amplify Vue в своих шаблонах для обеспечения аутентификации, хранения и других функций. Например, вы можете использовать компонент <amplify-authenticator>
, чтобы добавить в свое приложение функции входа и регистрации, или компонент <amplify-s3-album>
, чтобы отображать изображения из корзины S3.
10. Разверните приложение. Запустите amplify push
, чтобы развернуть приложение и связанные с ним ресурсы AWS.
Например, в вашем main.js
вы можете настроить Amplify следующим образом:
import Amplify from 'aws-amplify' import { AmplifyPlugin } from 'aws-amplify-vue' import aws_exports from './aws-exports' Vue.use(AmplifyPlugin, Amplify) Amplify.configure(aws_exports)
А затем в своем шаблоне вы можете использовать компонент <amplify-authenticator>
, чтобы добавить функции входа и регистрации в свое приложение. Вот пример того, как вы можете использовать библиотеку AWS Amplify для добавления аутентификации в ваше приложение Vue:
- Импортируйте модуль
Auth
из библиотекиaws-amplify
в ваш компонент Vue:
import { Auth } from 'aws-amplify'
2. Используйте метод Auth.currentAuthenticatedUser()
, чтобы проверить, вошел ли пользователь в данный момент. Вы можете использовать этот метод, чтобы показать или скрыть определенные части вашего приложения в зависимости от статуса аутентификации пользователя. Например:
mounted() { Auth.currentAuthenticatedUser() .then(user => { this.signedIn = true }) .catch(() => { this.signedIn = false }) },
3. Используйте методы Auth.signIn()
и Auth.signOut()
, чтобы позволить пользователю входить и выходить из вашего приложения. Например:
methods: { async signIn() { try { await Auth.signIn(this.username, this.password) this.signedIn = true } catch (error) { console.log('Error signing in:', error) } }, async signOut() { try { await Auth.signOut() this.signedIn = false } catch (error) { console.log('Error signing out:', error) } } }
4. Используйте компонент <amplify-authenticator>
для создания формы входа или регистрации для вашего приложения. Например:
<template> <div> <amplify-authenticator v-if="!signedIn"></amplify-authenticator> <div v-else> <h1>Welcome!</h1> <amplify-sign-out @signedout="signedIn = false"></amplify-sign-out> </div> </div> </template>
Обратите внимание, что компонент <amplify-authenticator>
автоматически обрабатывает процесс входа и регистрации за вас, вам просто нужно настроить его с помощью параметров вашего приложения.
5. Наконец, вы можете использовать Auth.currentUserInfo()
для получения информации о текущем вошедшем в систему пользователе и Auth.currentSession()
для получения, например, текущего сеанса пользователя.
mounted() { Auth.currentSession() .then(data => { console.log(data); }) .catch(err => console.log(err)); },
Это базовый пример того, как вы можете использовать библиотеку AWS Amplify для добавления аутентификации в свое приложение Vue, но вы также можете добавить другие функции, такие как хранилище, API и аналитика.