Nuxt.js Fundamental ตอนที่ 8 - การทำระบบ Authentication

npm install @nuxtjs/auth @nuxtjs/axios

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

auth: {
  // Options
}

// optional
axios: {
  baseURL: 'http://127.0.0.1:8888/api',
  credentials: true
},

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: 'login', method: 'post', propertyName: 'data.token' },
        user: { url: 'me', method: 'get', propertyName: 'data' },
        logout: false
      }
    }
  },
  redirect: {
    login: '/login'
  }
}

this.$auth;

this.$auth.user;
// มีค่าเท่ากับเข้าถึงผ่าน Vuex
this.$store.state.auth.user;

this.$auth.isLoggedIn;
// เท่ากับ
this.$store.state.auth.isLoggedIn;

const payload = {
  data: {
    username: '',
    password: ''
  }
};

this.$auth.loginWith('local', payload);

this.$auth.setUserToken(token);

// nuxt.config.js
router: {
  middleware: ['auth'];
}

<template> </template>

<script>
  export default {
    middleware: 'auth'
  };
</script>

const express = require('express');
const cors = require('cors');

const app = express();
const router = express.Router();

app.use(cors());
app.use(express.json());

const user = {
  id: 1,
  username: 'john',
  email: 'john@doe.com',
  name: 'John Doe'
};

router.get('/me', (req, res) => {
  return res.json({
    data: {
      user
    }
  });
});

router.post('/login', (req, res) => {
  const { email, password } = req.body;

  // query db.

  if (email === 'admin@admin.com' && password === '123456') {
    return res.json({
      data: {
        user,
        token: 'THIS_IS_TOKEN'
      }
    });
  } else {
    return res.status(401).json({
      message: 'Invalid Password'
    });
  }
});

app.use('/api', router);

app.listen(12345, () => {
  console.log('Mock API start on port 12345');
});

npm install express cors --save-dev

<template>
  <form @submit="login">
    <input type="email" name="email" v-model="email" />
    <input type="password" name="password" v-model="password" />

    <button type="submit">Login</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        email: '',
        password: ''
      };
    },
    methods: {
      async login(e) {
        e.preventDefault();

        const payload = {
          email: this.email,
          password: this.password
        };

        try {
          await this.$auth.loginWith('local', {
            data: payload
          });
          this.$router.push('/');
        } catch (e) {
          this.$router.push('/login');
        }
      }
    }
  };
</script>

axios: {
  baseURL: 'http://localhost:12345/api'
},

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: 'login', method: 'post', propertyName: 'data.token' },
        user: { url: 'me', method: 'get', propertyName: 'data.user' },
        logout: false
      }
    }
  },
  redirect: {
    login: '/login'
  }
}

export const state = () => ({
  myState: 'Hello'
});

<template>
  <div>
    <h1>THiS IS PRIVATE</h1>

    <nuxt-link to="/">Go to Home</nuxt-link>
  </div>
</template>

<script>
  export default {
    middleware: 'auth'
  };
</script>

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">nuxt auth example</h1>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          rel="noopener noreferrer"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          GitHub
        </a>
      </div>

      <hr class="divider" />

      <div v-if="loggedIn">
        <h1>Hello, {{ user.email }}</h1>
        <button @click="logout" class="button--grey">Logout</button>
      </div>

      <div v-else>
        <nuxt-link to="/login" class="button--grey">Login</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: this.$auth.user,
        loggedIn: this.$auth.loggedIn
      };
    },
    methods: {
      async logout() {
        await this.$auth.logout();
        this.$router.push('/login');
      }
    }
  };
</script>

<style>
  .divider {
    margin: 2em 0;
  }

  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .title {
    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }

  .subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
  }

  .links {
    padding-top: 15px;
  }
</style>