Google Login trong NuxtJS

Tram Ho

1. Auth

Authenticate là thứ rất quen thuộc của mỗi app, trong bài viết này mình sẽ giới thiệu auth module dành cho nuxt giúp bạn xử lý công việc này rất nhanh và dễ dàng.

2. Cài đặt

Trước hết là cài nuxt

yarn create nuxt-app nuxt-project

Cài đặt auth module

yarn add @nuxtjs/auth yarn add @nuxtjs/axios

thêm module vào nuxt.config.js

thêm file index.js vào thư mục store để active vuex cho project

chạy lệnh yarn dev và mở link lên xem

giờ chúng ta thử thêm middleware vào file pages/index.vue

và kết quả là

vì chúng ta đã set middleware auth nhưng chưa xác thực user nên nuxt đã redirecrt chúng ta tới trang /login. Giờ chúng ta sẽ tiếp tục tạo file pages/login/index.vue

Tiếp theo chúng ta cần tạo clientId của google https://console.developers.google.com/ chi tiết thì các bạn google sẽ có rất nhiều hướng dẫn. Thêm clientId vừa tạo dc vừa vào nuxt.config.js

Sửa lại file login/index.vue

Sửa lại file pages/index.vue

Giờ bạn hãy mở trình duyệt lên, login và xem kết quả

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo