Cara menggunakan get all keturunan javascript

Dalam artikel ini, Anda akan mempelajari cara membuat situs web Vue yang akan menampilkan acara yang diselenggarakan oleh suatu organisasi. Pengguna akan masuk untuk melihat laman detail acara, jadi Anda juga akan menambahkan autentikasi ke situs web. Anda akan mempelajari beberapa latar belakang Vue, struktur aplikasi Vue, membuat komponen, mengatur perutean, dan menata gaya dengan Bulma

Anda dapat menemukan kode terakhir di repositori GitHub ini jika Anda ingin melihat hasil akhirnya sekarang

❗ Jika Anda sudah memiliki aplikasi Vue dan hanya ingin menambahkan autentikasi, untuk mempelajari caranya

⚡️ Ini adalah tutorial dua bagian. Bagian satu tidak mencakup otorisasi. Anda akan mengatur tahapan untuk bagian kedua dengan membangun situs web dan mengintegrasikan login pengguna. Kemudian di bagian kedua, Anda akan mempelajari cara hanya menampilkan data tertentu jika pengguna masuk dan telah diberi otorisasi untuk mengakses data tersebut

Persyaratan

Aplikasi ini menggunakan versi terbaru (pada saat penulisan — 8/8/2020) berikut ini

• Melihat. js (

  ? Pick a linter / formatter config: (Use arrow keys)
  ❯ ESLint with error prevention only
    ESLint + Airbnb config
    ESLint + Standard config
    ESLint + Prettier

  _7)
• Node. js (

  ? Pick a linter / formatter config: (Use arrow keys)
  ❯ ESLint with error prevention only
    ESLint + Airbnb config
    ESLint + Standard config
    ESLint + Prettier

  _8)

Catatan. Tutorial ini menggunakan Vue 2. Rilis untuk Vue 3 dijadwalkan untuk kuartal ketiga tahun 2020, tetapi itu tidak berarti Anda tidak boleh memulai dengan Vue 2. Tutorial ini meletakkan dasar-dasar Vue yang akan dibawa ke rilis berikutnya juga

Anda dapat mengunduh Node. js di sini, yang secara otomatis menginstal npm, manajer paket Node, juga

Npm memungkinkan Anda menginstal jutaan pustaka dengan cepat dan dengan mudah mengelola semua dependensi yang Anda miliki di aplikasi Anda. Anda akan melihat betapa bermanfaatnya ini segera

Tutorial ini akan memandu Anda melalui cara membuat semuanya dari awal, jadi Anda tidak perlu memiliki pengetahuan sebelumnya tentang Vue atau Node untuk mengikutinya. Namun, Anda memerlukan editor kode (VS Code adalah favorit saya) dan akses ke terminal untuk mengikuti tutorial ini

Mari kita mulai

Mengapa Belajar Vue?

Vue sejarah dan popularitas

Melihat. js adalah framework JavaScript yang dibuat oleh Evan You yang popularitasnya meledak selama beberapa tahun terakhir

Sumber. 2018 State of JS Survey Minat Vue. js meningkat hampir tiga kali lipat dari 2016 ke 2018 dengan peningkatan pada mereka yang tertarik untuk mempelajarinya dan mereka yang akan menggunakannya lagi

Sumber. Survei JS 2018 Pada tahun 2018, mayoritas orang yang disurvei pernah mendengar tentang Vue. js dan ingin mempelajarinya atau sudah menggunakannya dan akan menggunakannya lagi

Evan You meluncurkan proyek tersebut setelah mengerjakan beberapa proyek AngularJS saat dia bekerja untuk Google. Vue tidak didukung oleh perusahaan besar seperti Google (Angular) atau Facebook (React), tetapi seperti yang Anda lihat pada bagan di atas, Vue masih dapat berdiri sendiri di antara framework JavaScript teratas.

Karena sejarah Evan You di Google, Anda bahkan mungkin melihat beberapa kesamaan antara Vue dan AngularJS (Angular lama)

Saya pikir, bagaimana jika saya bisa mengekstrak bagian yang sangat saya sukai tentang Angular dan membuat sesuatu yang sangat ringan

— Evan You dalam membuat Vue. js

Vue vs. Sudut vs. Reaksi

Salah satu hal terbaik tentang Vue adalah hambatan masuk yang rendah

Sumber. Survei JS 2018 Untuk pengembang yang memilih "akan menggunakan lagi", Vue favorit mereka. Fitur js adalah kurva belajar yang mudah, gaya pemrograman yang elegan, dan dokumentasi yang bagus

Banyak kerangka kerja lain mungkin mengharuskan (atau sangat menyarankan) agar Anda mempelajari sintaksnya sendiri atau mengintegrasikan teknologi lain (mis. g. , TypeScript untuk Angular atau JSX untuk Bereaksi). Tentu saja, tidak ada yang salah dengan hal ini, tetapi ini membuat sedikit lebih sulit bagi seorang pemula untuk memulai ketika mereka harus segera mengetahui semua hal. Vue jika Anda mau, tetapi tidak wajib. Ini bukan untuk mengatakan satu metode lebih baik dari yang lain, tetapi sintaks mirip HTML ini adalah salah satu penjelasan yang mungkin mengapa pengembang menganggap Vue lebih mudah dipelajari pada awalnya.

Sekali lagi, ketika membandingkan kerangka kerja populer, tidak ada yang lebih baik dari yang lain. Pada akhirnya, tergantung pada apa yang Anda rasa paling nyaman digunakan

Vue adalah opsi yang bagus jika Anda ingin menjalankan sesuatu dengan cepat. Ini memiliki dukungan komunitas yang hebat, dokumentasi yang kuat dalam beberapa bahasa, dan menyenangkan untuk digunakan

Pengaturan

Baiklah, mari kita mulai dengan beberapa kode

Pertama, buka terminal Anda dan alihkan ke direktori tempat Anda ingin menyimpan proyek

Anda akan membuat proyek baru ini menggunakan Vue CLI

🛠️️ Alat Vue CLI membantu memulai dan menjalankan Vue dengan cepat dengan memungkinkan Anda memilih dari pengaturan build yang telah dikonfigurasi sebelumnya. Untuk menggunakan CLI, jalankan perintah berikut di terminal Anda

npx @vue/cli create events-app

Ini membuat folder baru bernama

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Catatan.

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

_0 memungkinkan Anda menggunakan Vue CLI tanpa menginstalnya secara global. Ini tersedia dalam versi npm >= 5. 2. 0

CLI sekarang akan mengajukan beberapa pertanyaan kepada Anda sehingga dapat mengatur aplikasi dengan benar. Opsi yang digunakan tutorial ini tercantum di bawah ini. Tekan

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

🛠️️ Langkah 1. Pilih preset —

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Langkah 2. Periksa fitur yang diperlukan —

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

Tekan

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

_7 untuk memilih beberapa fitur dan

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

1 setelah Anda memilih semua fitur

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Langkah 3. Mode riwayat —

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Catatan. Ini akan menghapus hash default (#) dari URL

🛠️️ Langkah 4. Pra-prosesor CSS —

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Catatan. Dart Sass adalah implementasi utama dari Sass

🛠️️ Langkah 5. Pilih linter/formatter —

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

🛠️️ Langkah 6. Fitur serat tambahan —

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Pick additional lint features:
  ◯ Lint on save
❯ ◉ Lint and fix on commit

🛠️️ Langkah 7. Lokasi konfigurasi —

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

🛠️️ Langkah 8. Simpan sebagai preset —

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Save this as a preset for future projects? (y/N) N

Sekarang CLI akan mengonfigurasi aplikasi Anda. Itu juga akan menginstal dependensi, jadi berikan sedikit waktu (~30 detik)

🛠️️ Setelah selesai, Anda dapat memulai aplikasi dengan menjalankan

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

cd events-app
npm run serve

Lihat aksinya di

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

"Vue CLI membantu Anda bangun dan berjalan dengan Vue. js dalam hitungan detik. "

Tweet Ini

Arsitektur Aplikasi Vue

Sekarang buka proyek Anda di editor kode Anda, dan Anda akan melihat beberapa file default yang dibuat CLI. Mari kita bersihkan ini

🛠️️ Hapus file-file ini

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

🛠️️ Sekarang buka

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Ini akan meninggalkan Anda dengan beranda kosong dan bilah navigasi dengan dua tautan. Rumah dan Tentang

Mari kita lihat sekilas file-file penting yang tersisa sehingga Anda dapat melihat bagaimana mereka bekerja sama

bermain. js

File pertama yang perlu diperhatikan adalah file ________26______1. Ini akan menjadi titik masuk untuk aplikasi Vue Anda

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Anda memiliki impor di bagian atas file

• Vue sendiri
• Komponen

  ? Save this as a preset for future projects? (y/N) N

  _2 (yang akan kita bahas sebentar lagi)
• Router (dibuat oleh CLI)

Selanjutnya, Anda memiliki

? Save this as a preset for future projects? (y/N) N

Dan terakhir, Anda membuat instance Vue baru di bagian bawah

Instance Vue diperlukan untuk setiap aplikasi Vue. yang berisi informasi tentang aplikasi Anda, seperti elemen DOM tempat instance Vue akan dipasang, data yang akan digunakan instance, yang berjalan di beberapa titik selama siklus hidup instance, dan banyak lagi

Dalam hal ini, instance Vue menggunakan router, merender aplikasi dengan template

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

indeks. html

Selanjutnya, buka

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Jika Anda melihat ke bagian bawah file, Anda akan melihat di mana

cd events-app
npm run serve

? Save this as a preset for future projects? (y/N) N

cd events-app
npm run serve

Aplikasi. melihat

File penting berikutnya adalah

cd events-app
npm run serve

Anda belum perlu mengetahui semua detail file ini, ketahuilah bahwa ini adalah "blok penyusun" selanjutnya dari aplikasi Vue Anda. Saat Anda meninjau file

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

Sebelum masuk ke detail file ini, mari kita pelajari terlebih dahulu tentang apa itu komponen dengan meninjau sistem komponen Vue

Menggunakan Komponen di Vue

Konsep komponen secara umum terkadang terlalu rumit, namun kenyataannya cukup sederhana. Komponen adalah blok kode modular dan dapat digunakan kembali. Ini berisi semua HTML, JavaScript, dan CSS yang diperlukan untuk fungsinya

Bayangkan Anda memiliki situs web sederhana yang memiliki dua halaman. halaman rumah dan halaman portofolio

• Beranda — Berisi beberapa gambar, informasi dasar, dan carousel dengan beberapa testimonial
• Halaman portofolio — Berisi beberapa gambar dan deskripsi karya Anda

Anda memutuskan bahwa Anda ingin halaman Portofolio Anda menyertakan semua testimonial yang ada di beranda Anda juga

Dalam skenario ini, Anda dapat menyalin/menempelkan semua kode yang diperlukan untuk testimonial ke kedua halaman, tetapi Anda akan melanggar aturan KERING emas ("Jangan Ulangi Diri Sendiri")

Di sinilah ide komponen mulai masuk akal. Alih-alih membuat kode duplikat, Anda dapat mengeluarkan kode testimonial itu dan mengemasnya ke dalam file tersendiri. Potongan kode mandiri ini akan berisi HTML, gaya, dan JS apa pun yang diperlukan untuk membuat carousel berfungsi

Sekarang, kapan pun Anda ingin memasukkan "komponen" testimonial itu di suatu tempat, yang harus Anda lakukan hanyalah mengimpor komponen itu

Aplikasi Anda akan mulai mengambil semacam struktur pohon. Anda akan memiliki komponen "root", yang dalam hal ini adalah

cd events-app
npm run serve

Sumber.

Sekarang setelah Anda memiliki ide tentang komponen, mari kita lihat seperti apa komponen Vue

komponen Vue

Ada banyak cara untuk menyusun komponen di Vue. Mari kita lihat cara yang paling populer. Komponen file tunggal

Komponen file tunggal mengemas template, logika, dan gaya yang digunakan oleh komponen ke dalam satu file dengan ekstensi

cd events-app
npm run serve

? Please pick a preset:
  default (babel, eslint)
> Manually select features

HTML terlampir dalam tag ________29______8. Di dalam, Anda akan melihat

cd events-app
npm run serve

Catatan. Anda harus selalu memiliki elemen induk

? Please pick a preset:
  default (babel, eslint)
> Manually select features

_00 yang menyertakan sisa HTML setelah tag template

Selanjutnya, ada tag

? Please pick a preset:
  default (babel, eslint)
> Manually select features

• Pernyataan

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  _02 yang memungkinkan Anda mengimpor dan menggunakan komponen lain di dalam komponen ini
• Objek

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  _03 yang memungkinkan Anda menentukan dan mengekspor komponen bernama ini untuk digunakan kembali di seluruh aplikasi Anda
• Objek

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  _04 di dalam ekspor tempat Anda dapat membuat daftar semua komponen anak yang digunakan dalam komponen ini

Catatan. Ini adalah contoh yang cukup mendasar, tetapi ada banyak opsi komponen lain yang dapat Anda sertakan dalam objek komponen Anda

Selanjutnya, ada tag

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Mari kita lihat file

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Aplikasi. melihat

Buka

cd events-app
npm run serve

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Ini adalah template tampilan pertama yang dirender di aplikasi Anda. Komponen lainnya akan dimulai dari sini

Lihatlah

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Kami akan segera membahas lebih dalam tentang perutean, tetapi ketahuilah bahwa saat Anda mengeklik salah satu tautan tersebut, templat yang sama ini akan tetap dirender, tetapi

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Coba klik tautan tersebut untuk melihatnya sendiri

Membangun Komponen Aplikasi

Sekarang setelah Anda mengetahui anatomi aplikasi Vue dan cara membuat komponen, saatnya untuk mulai membuat

🛠️️ Pastikan Anda masih berada di folder

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Catatan. Jika Anda menggunakan Windows, perintah

? Please pick a preset:
  default (babel, eslint)
> Manually select features

15 mungkin tidak berfungsi, tergantung pada pengaturan Anda. Anda selalu dapat membuat file secara manual

🛠️️ Sekarang buat komponen yang akan dibagikan di antara halaman-halaman ini

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Itu harus dilakukan untuk saat ini. Mari kita mulai mengisi file-file ini dan membahas tujuan dari setiap file

Menggunakan Bulma untuk Styling

Untuk membuat penataan sedikit lebih mudah, Anda akan menggunakan Bulma, yang merupakan framework CSS sumber terbuka

🛠️️ Beralih ke folder

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Sekarang buka

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Mulai aplikasi sekali lagi sehingga Anda dapat melihat pekerjaan Anda sedang berlangsung saat Anda terus membangun di bagian selanjutnya

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Anda dapat membiarkannya berjalan di latar belakang selama sisa tutorial ini, dan Anda akan selalu dapat melihatnya di browser di

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Komponen Rumah

Sekarang mari mulai mengerjakan komponen

🛠️️ Buka Komponen Rumah di

? Save this as a preset for future projects? (y/N) N

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ini akan memberi Anda spanduk dan tombol besar di bagian atas halaman. Tombol tersebut akan mengarah ke formulir pendaftaran, yang akan Anda kirim nanti

Tentang Komponen

Komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Komponen Nav

🛠️️ Sekarang perbaiki nav. Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Jika Anda menyegarkan, Anda akan melihat nav tidak berubah. Itu karena Anda sebenarnya tidak menggunakan komponen ini di mana pun

🛠️️ Buka ________29______3 dan ganti dengan ini

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Karena Anda mendefinisikan tautan router di komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Sekarang, jika Anda menyegarkan, Anda akan melihat nav baru Anda. Anda bahkan dapat mengeklik, dan itu akan membuka rute berbeda yang telah Anda tentukan di komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Selanjutnya, Anda akan menambahkan komponen ke halaman

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Komponen DaftarAcara

🛠️️ Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ini akan membuat blok kartu yang menempati 1/4 baris (dengan menggunakan

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Untuk saat ini, cukup ulangi kode kartu tersebut beberapa kali agar Anda dapat melihat bagaimana strukturnya nantinya

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Selanjutnya Anda perlu

1. Impor ini ke dalam komponen

   ? Please pick a preset:
     default (babel, eslint)
   > Manually select features

   _12
2. Tambahkan ke daftar komponen yang digunakan

   ? Please pick a preset:
     default (babel, eslint)
   > Manually select features

   _12 di

   ? Please pick a preset:
     default (babel, eslint)
   > Manually select features

   36
3. Masukkan ke tempat yang sesuai di

   ? Please pick a preset:
     default (babel, eslint)
   > Manually select features

   12 template

🛠️️ Buka

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Sekarang di bagian template, panggil komponen dengan

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Anda sekarang akan melihat teks subtitel, "Lihat acara kami yang akan datang", ditampilkan di bawah spanduk beranda. Namun, belum ada satu pun kartu yang ditampilkan. Itu karena Anda belum membuatnya

Komponen Kartu Acara

🛠️️ Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Anda sekarang akan melihat dua kartu diisi dengan beberapa konten tiruan

Tentu saja, Anda ingin setiap kartu menjadi unik dan mewakili peristiwa yang sebenarnya. Anda akan segera kembali ke komponen ini untuk melihat bagaimana Anda dapat memasukkan data dan menyelesaikannya

Untuk saat ini, selesaikan penyiapan komponen Anda yang lain

Komponen Tunggal Peristiwa

🛠️️ Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ini akan menjadi halaman yang muncul saat pengguna mengklik acara dari daftar di beranda. Karena halaman ini sebenarnya belum ada, inilah saat yang tepat untuk mengunjungi kembali router Anda

Jalur router

🛠️️ Buka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Tekan simpan dan arahkan ke

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Jika Anda melihat di bawah

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Mari bekerja menambahkan data sekarang

Menambahkan Data ke Aplikasi Vue Anda

Agar tutorial ini tetap fokus pada dasar-dasar Vue, Anda hanya akan membuat larik objek (di mana setiap objek adalah peristiwa) dan menyimpannya di dalam komponen yang membutuhkannya.

Idealnya, Anda ingin menarik data dari API untuk mengisi blok kartu secara dinamis, tetapi itu sedikit di luar cakupan tutorial ini. Jika Anda tertarik untuk melakukan panggilan ke API menggunakan Vue dan mengamankan data apa pun yang Anda miliki, pastikan Anda membaca bagian 2 dari tutorial ini di mana Anda akan melakukannya

Mari tinjau kembali tiga komponen yang tidak memiliki data dinamis dan lihat cara mengisinya

Komponen DaftarAcara

🛠️️ Kembali ke komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Satu-satunya hal yang berubah di sini adalah penambahan fungsi

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

• Larik

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  _56 menampung 2 objek yang masing-masing sesuai dengan peristiwa yang berbeda
• Objek

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  _55 akan mengadakan satu peristiwa untuk diteruskan ke komponen anak,

  ? Please pick a preset:
    default (babel, eslint)
  > Manually select features

  33

Selanjutnya, Anda perlu memodifikasi bagian HTML dari file ini untuk mengulangi peristiwa ini dan kemudian mengirim masing-masing ke rantai untuk dirender oleh komponen anak,

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Ganti semua yang ada di antara

cd events-app
npm run serve

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Mari kita lihat lebih dekat blok kode yang berubah (diberi spasi untuk keterbacaan yang lebih baik)

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Anda dapat mengulangi peristiwa dalam larik

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Ini juga pertama kalinya Anda melihat arahan

Arahan adalah jenis markup khusus yang dapat Anda gunakan untuk melakukan sesuatu pada elemen DOM. Di Vue, ini semua dimulai dengan

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Di sini, Anda menggunakan atribut

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Save this as a preset for future projects? (y/N) N

Catatan. Di Vue,

? Please pick a preset:
  default (babel, eslint)
> Manually select features

_72 adalah singkatan dari

? Please pick a preset:
  default (babel, eslint)
> Manually select features

73

Anda juga mengikat nilai

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Selanjutnya, Anda menggunakan

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Save this as a preset for future projects? (y/N) N

Lanjutkan dan klik salah satu, dan Anda akan melihat bahwa itu tertaut ke satu halaman acara yang Anda buat

Terakhir, Anda memanggil komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Saat ini, komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Komponen Kartu Acara

🛠️️ Buka komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Komponen ini memiliki sesuatu yang baru.

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Setiap kali komponen Anda mengharapkan data, Anda harus menambahkan nama variabel data tersebut ke opsi

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Prop adalah properti pada komponen

Di sinilah Anda menentukan data yang diharapkan komponen dari komponen induknya

Prop

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Ini dikenal sebagai. Menggunakan interpolasi string, Anda dapat menampilkan nilai

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

🛠️️ Untuk melihat ini beraksi, lanjutkan dan perbarui bagian templat

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Jika Anda kembali ke beranda di browser, Anda akan melihat kartu sekarang memiliki data yang benar

Sekadar meringkas, komponen induk,

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

EventSingleComponent

Bagian terakhir dari aplikasi yang memerlukan update data adalah komponen

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Anda dapat melihat status komponen ini saat ini di browser di

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Komponen ini adalah contoh yang bagus tentang bagaimana mengirimkan data mulai menjadi rumit

Pikirkan kembali bagaimana tautan ke halaman ini dibuat di

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Ini menggunakan

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Anda dapat menggunakan metode yang mirip dengan yang Anda gunakan sebelumnya untuk mengisi data dari

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Anda juga harus mempertimbangkan apa yang akan terjadi jika alih-alih mengeklik tautan, seseorang langsung membuka

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Itu tidak akan

Jadi untuk aplikasi ini, opsi terbaik Anda adalah dengan menarik datanya lagi

Inilah inti dari apa yang perlu terjadi

1. Raih

   ? Save this as a preset for future projects? (y/N) N

   _6 dari parameter rute (di URL)
2. Gunakan itu untuk mengeluarkan acara yang benar dari daftar semua acara
3. Isi template dengan data dari event tertentu

🛠️️ Untuk melakukan ini, buka

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Gulir ke bawah ke bagian

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Pertama, mari kita bahas untuk apa ________14______19 digunakan

Instance Vue melewati banyak langkah saat dibuat. Ini menyiapkan observasi data, mengompilasi template, memasang instance Vue ke DOM, dan memperbarui DOM saat perubahan terdeteksi

Tetapi bagaimana jika Anda perlu melompat di beberapa titik di antara langkah-langkah ini dan menjalankan beberapa kode?

Pengait

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ada beberapa kait siklus hidup yang tersedia, seperti yang Anda lihat pada gambar di bawah

Sumber Gambar.

Jadi tepat setelah instance dibuat, fungsi ________14______19 berjalan

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Fungsi ini membuat variabel bernama

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

? Save this as a preset for future projects? (y/N) N

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Selanjutnya, Anda membuat variabel bernama

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Save this as a preset for future projects? (y/N) N

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Kemudian Anda menyetel variabel

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Idealnya, Anda ingin menarik data ini dari API. Dalam kasus seperti ini, Anda cukup menekan titik akhir yang mengembalikan kejadian spesifik yang Anda inginkan dengan mengirimkan parameter rute, tetapi karena Anda belum memiliki API, metode ini baik-baik saja. Sebagai tindak lanjut dari tutorial ini, Anda akan memfaktorkan ulang kode ini untuk menggunakan API sebenarnya

Hal keren lainnya yang Anda lakukan adalah mengulang gambar di acara tertentu. Mari kita lihat lebih dekat blok kode yang menampilkan gambar

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Ini menggunakan direktif

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Sekarang kembali ke beranda dan klik di sekitar. Semua komponen merender data yang benar, jadi saatnya menambahkan autentikasi

Menambahkan Otentikasi ke Aplikasi Vue Anda

Hal terakhir yang harus dilakukan adalah menambahkan fungsionalitas login ke aplikasi. Anda akan menggunakan layanan autentikasi Auth0 untuk melakukan ini

Pertama, daftar akun Auth0 gratis di sini →

Setelah Anda terdaftar, Anda akan dibawa ke dasbor manajemen Auth0

• Klik "Aplikasi" di sidebar kiri
• Klik tombol merah besar bertuliskan "Buat Aplikasi"
• Beri nama "Acara Vue" (atau apa pun yang Anda suka)
• Klik "Aplikasi Web Satu Halaman" untuk "tipe aplikasi"
• Klik "Buat"

🛠️️ Selanjutnya, klik "Pengaturan" untuk mengisi beberapa informasi yang diperlukan Auth0 untuk mengonfigurasi autentikasi untuk aplikasi Anda

URL Panggilan Balik yang Diizinkan —

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Di sinilah Auth0 akan mengarahkan ulang pengguna setelah diautentikasi

URL Keluar yang Diizinkan —

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Ini adalah URL tempat pengguna akan kembali setelah mereka keluar dari aplikasi Anda

Asal Web yang Diizinkan —

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Ini adalah URL yang digunakan Auth0

Gulir ke bawah dan klik tombol "Simpan Perubahan".

Itu saja yang Anda butuhkan dari dasbor untuk saat ini, tetapi jangan diklik dulu. Anda harus segera menarik beberapa nilai ini dari dasbor ke aplikasi Anda

Instal paket Auth0 SPA

🛠️️ Kembali ke terminal dan instal paket ________14______42 Auth0 di direktori root aplikasi

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Buat pembungkus autentikasi

Selanjutnya, Anda akan membuat objek Vue pembungkus yang dapat digunakan kembali di sekitar Auth0 SDK. Anda juga akan membuat plugin Vue yang memaparkan pembungkus ini ke seluruh aplikasi

🛠️️ Buat file dan folder baru untuk ini. Pastikan Anda masih berada di direktori root

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

🛠️️ Sekarang buka file

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Komentar dalam file ini mencakup detail tentang apa yang terjadi, tetapi untuk meringkas, pertama-tama Anda membuat (atau mengembalikan) instance Auth0 SDK. Instance hanyalah objek Vue

• Instance berisi data berikut.

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  _45,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  46,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  47,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  48,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  49, dan

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  50
• Ini juga mencakup beberapa metode yang akan dipanggil nanti, tetapi perhatikan sekarang.

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  _51,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  52,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  53,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  54,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  55,

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  56, dan

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  57

Selama kait siklus hidup

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Saat pengguna mengklik "Masuk", mereka dialihkan ke halaman Login Universal Auth0 (lebih lanjut tentang ini nanti). Mereka akan memasukkan kredensial mereka di sana dan kemudian dialihkan kembali ke aplikasi. Di sinilah "URL Panggilan Balik yang Diizinkan" dari dasbor Auth0 berperan.

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Instance ini juga berisi objek

? Save this as a preset for future projects? (y/N) N

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Nilai-nilai ini tidak terlalu sensitif, tetapi masih merupakan praktik yang baik untuk membiarkannya di luar kendali sumber Anda (mis. g. GitHub). Jadi mari kita buat file yang dapat ditambahkan ke

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Pastikan Anda masih berada di direktori

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Jika Anda menggunakan Git atau kontrol versi lainnya, buka

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Selanjutnya, buka

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Menemukan nilai

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

• Buka dasbor Auth0
• Klik "Aplikasi" dan pilih aplikasi Anda
• Klik pada "Pengaturan"
• Salin nilai untuk "Domain" dan rekatkan ke

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  63 di

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  68
• Salin nilai untuk "ID Klien" dan tempel ke

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  62 di

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   ◉ Babel
   ◯ TypeScript
   ◯ Progressive Web App (PWA) Support
   ◉ Router
   ◯ Vuex
   ◉ CSS Pre-processors
   ◉ Linter / Formatter
   ◯ Unit Testing
   ◯ E2E Testing

  68

Selanjutnya, buka

? Save this as a preset for future projects? (y/N) N

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Ganti semua

? Save this as a preset for future projects? (y/N) N

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Di sini Anda hanya mengimpor file konfigurasi Auth0 yang Anda buat untuk mendapatkan akses ke nilai

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Terakhir, Anda menginstal dan mengonfigurasi plugin

Wiring up tombol login dan logout

Sekarang Anda telah mengkonfigurasi plugin autentikasi Auth0, saatnya untuk memperbaiki tombol "Masuk" sehingga benar-benar melakukan sesuatu

🛠️️ Buka ________7______22. Temukan blok kode yang dimulai dengan

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Tombol sekarang dibungkus

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

🛠️️ Ayo buat metode tersebut sekarang. Di file yang sama, gulir ke bawah ke tag

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Sekarang kembali ke aplikasi dan klik "Masuk" dan Anda akan dialihkan ke halaman Auth0 Universal Login

Jika Anda mengalami masalah, periksa kembali apakah nilai Anda di

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

68 sudah benar. Jika Anda masih mengalami masalah, tinggalkan komentar di bawah, dan saya akan membantu Anda menyelesaikannya

Setelah Anda membuka halaman Login Universal Auth0, daftar dengan akun pengguna palsu. Anda kemudian akan melihat layar yang memberi tahu Anda bahwa aplikasi meminta akses ke profil dan email Anda

Klik tanda centang, dan Anda akan dialihkan kembali ke "URL Panggilan Balik yang Diizinkan" yang Anda tentukan di dasbor, yang merupakan beranda aplikasi Anda. Sekarang alih-alih tombol "Masuk", Anda akan melihat tombol "Keluar".

Opsional. Auth0 menawarkan opsi masuk sosial langsung dari dasbor. Google diaktifkan secara default, dan Anda dapat mengaktifkannya satu per satu di dasbor pengelolaan Auth0

Klik "Koneksi"> "Sosial" di sidebar. Pastikan untuk menggunakan kunci dev Anda sendiri jika ingin mengintegrasikan sign-on sosial. Kunci dev Auth0 default baik-baik saja untuk pengujian, tetapi dapat menyebabkan kesalahan yang tidak terduga (seperti keluar saat penyegaran), jadi kami tetap menyarankan untuk menggunakan milik Anda sendiri

Mengakses informasi pengguna

Auth0 memungkinkan Anda mengakses informasi pengguna yang masuk di templat Anda dengan yang berikut ini

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Isi

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Jadi jika Anda ingin menambahkan halaman profil di masa mendatang, Anda memiliki akses ke data ini (dan lebih banyak lagi) untuk ditampilkan

Sekarang setelah Anda tahu cara menambahkan tombol masuk, mari pasang tombol kedua di beranda

🛠️️ Buka

? Save this as a preset for future projects? (y/N) N

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

🛠️️ Sekarang Anda hanya perlu menambahkan bagian metode dengan fungsi

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Sekarang pengguna dapat masuk dengan tombol ini juga, dan setelah mereka masuk, itu akan diganti dengan pesan selamat datang dengan nama mereka menggunakan

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Siapkan Penjaga Rute

Jadi sekarang, hal terakhir yang perlu Anda lakukan adalah mengalihkan pengguna yang tidak diautentikasi dari halaman Peristiwa Tunggal. Ini berarti mereka harus dapat melihat beranda dengan daftar kartu/acara, tetapi segera setelah mereka mengklik ke halaman detail acara, mereka harus ditendang ke halaman masuk

⚡️ PENTING ⚡️ Ini hanya mencegah halaman dimuat; . Anda TIDAK PERNAH mengandalkan frontend untuk melindungi data Anda

Karena Anda belum membuat API backend, Anda hanya menyimpan semua data dalam komponen di frontend. Meskipun Anda akan menyiapkan penjaga rute untuk mengalihkan pengguna yang tidak diautentikasi dari satu halaman acara, mereka masih dapat membaca file JavaScript dan menemukannya. Saya akan menunjukkan caranya sebentar lagi

{% jika halaman. url berisi '/amp/' %} Pada bagian 2, Anda akan mem-build API sehingga data ini disimpan dan dilindungi di backend dan hanya ditarik ke frontend jika pengguna diautentikasi. {% else %} Di bagian 2, Anda akan mem-build API sehingga data ini disimpan dan dilindungi di backend dan hanya ditarik ke frontend jika pengguna diautentikasi. {% berakhir jika %}

Mari atur penjaga rute sekarang sehingga ketika data datang dari backend, UI untuk mendorong pengguna ke halaman login sudah ada

🛠️️ Buat file bernama

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

{% prism bash %} sentuh src/auth/authGuard. js {%endprism %}

🛠️️ Buka itu di editor Anda dan rekatkan di bawah ini

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Ini menggunakan metode

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Jika pengguna diautentikasi,

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Selanjutnya, Anda perlu menambahkan penjaga autentikasi ini ke router agar ini berjalan sebelum tampilan apa pun dikembalikan

Anda cukup memeriksa apakah pengguna diautentikasi. Jika ya, biarkan mereka lewat, jika tidak, kirim mereka ke halaman login

🛠️️ Buka file router di

? Please pick a preset:
  default (babel, eslint)
> Manually select features

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Sekarang, jika Anda sudah masuk sebelumnya, Anda dapat mengklik salah satu kartu acara tersebut dan Anda masih dapat melihat halaman tunggal acara tersebut

Tetapi jika Anda membuka jendela penyamaran dan mencoba mengakses rute yang sama, Anda akan ditendang ke halaman login, persis seperti yang diharapkan

Seperti yang dibahas sebelumnya, ini tidak mencegah pengguna menemukan data untuk halaman tersebut

Jika Anda ingin tahu bagaimana ini mungkin, keluar atau buka jendela penyamaran, lalu buka

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

Jadi pada titik ini, Anda mungkin bertanya, "Holly, lalu apa gunanya redirect?"

Saya senang Anda bertanya. Ini sebagian besar dimaksudkan untuk pengalaman pengguna. Bayangkan bahwa data dilindungi di backend. Anda ingin memberi sinyal bahwa pengguna harus masuk untuk melihat halaman tertentu itu. Jika Anda tidak merender data apa pun di halaman itu, pengguna akan dihadapkan pada halaman kosong dan berpikir ada sesuatu yang rusak. Dalam skenario ini, mengarahkan mereka ke halaman masuk akan dengan mudah menandakan bahwa mereka harus masuk untuk melihatnya

Bungkus

Jika ini pertama kalinya Anda bekerja dengan Vue. js, semoga ini membantu Anda memahami bagaimana semuanya menyatu dalam aplikasi kecil. Sekadar rekap, berikut adalah beberapa topik yang dibahas dalam tutorial ini