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

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],

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

export default {
  middleware: 'auth'
}

và kết quả là

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

<template>
  <button class="login">
    Login with Google
  </button>
</template>
<script>
</script>
<style lang="scss" scoped>
.login {
  box-sizing: border-box;
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
  background: #DD4B39;
  &:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
    border-right: #BB3F30 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
  }
  &:focus {
    outline: none;
    background: #E74B37;
  }
  &:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
  }
  &:hover {
    cursor: pointer;
  }
}
</style>

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

auth: {
  strategies: {
    google: {
      client_id: '...'
    },
  }
}

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

<template>
  <button class="login" @click="login">
    Login with Google
  </button>
</template>
<script>
export default {
  methods: {
    login() {
      this.$auth.loginWith('google', { params: { prompt: "select_account" } })
    }
  }
}
</script>
...

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

<template>
  <div class="container">
    <img :src="user.picture" alt="">
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  middleware: 'auth',
  computed: {
    user() {
      return this.$auth.user;
    }
  }
}
</script>
<style>
</style>

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