text 持久性用户认证di vue dengan vuex pada后端feathersjs

Posted 2021-05-03

import Vue from 'vue'
import Vuex from 'vuex'
import ApiVuex from 'feathers-vuex'
import Api from './api.js'

const { service, auth } = ApiVuex(Api, { idField: '_id' })

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    service('users'),
    service('activities'),
    service('assets'),
    service('formats'),
    service('logs'),
    service('profiles'),
    service('roles'),
    service('tags'),
    service('types'),
    auth({ userService: 'users' })
  ]
})

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/components/Dashboard'
import Login from '@/components/Login'
import Logout from '@/components/Logout'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Dashboard', component: Dashboard },
    { path: '/login', name: 'Login', component: Login },
    { path: '/logout', nama: 'Logout', component: Logout }
  ]
})

# User Auth dengan feathers-vuex

Routing berdasarkan user authentication dilakukan pada level terluar vue `App.vue`, file diattach.

- Method untuk melakukan pemeriksaan terhadap eksistensi value dari `accessToken` di dalam store vuex yang terkoneksi dengan backend feathersjs melalui socket.io
- Apabila value tersebut `null` routing komponen akan diarahkan ke routing yang memiliki nama `Login`, selain itu routing akan diarahkan ke route yang memiliki nama `Dashboard` - file route yang digunakan terlampir

## Feathers client di Vue instance

Feathers client Vue terhubung dengan backend melalui socket.io dan authentikasi user dilakukan menggunakan feathers-authentication.

- api.js = Feathers client pada Vue Instance

## Persistence State dengan feathers-vuex

Dengan feathers-vuex initialisasi store dapat dilakukan secara sangat sederhana, feathers-vuex telah menyertakan 2 modul yaitu Authentication module dan Service Module, artinya ketika sudah dimasukkan ke dalam instance, feathers-vuex melakukan mapping antara vuex dan service feathersjs serta authentication service.

- store.js = initialisasi vuex storage dengan mapping ke feathers

## Vuex di Vue Instance

Menjadikan store.js sebagai state source pada vue instance dilakukan pada saat vue instance dicreate, pada contoh yang menggunakan vue-cli template hal ini dilakukan pada file `main.js`, store dapat diakses pada instance melalui `this.$store`

import Vue from 'vue'
import App from './App'
import router from './router.js'
import store from './store.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

import 'babel-polyfill'
import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'

const socket = io('http://localhost:6262', { transports: ['websocket'] })

const api = feathers()
  .configure(socketio(socket))
  .configure(auth({
    storageKey: 'key',
    storage: window.localStorage
  }))

export default api

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    async checkToken () {
      if (this.$store.state.auth.accessToken === null) {
        await this.$router.replace({name: 'Login'})
      }
    }
  },
  computed: {
    user () {
      return this.$store.state.auth.user
    }
  },
  watch: {
    user (newVal) {
      if (newVal === null) {
        this.$router.replace({name: 'Login'})
      } else {
        this.$router.replace({name: 'Dashboard'})
      }
    }
  },
  created () {
    this.checkToken()
  },
  mounted () {
    this.$store.dispatch('auth/authenticate').catch(error => {
      if (!error.message.includes('Could not find stored JWT')) {
        console.error(error)
      }
    })
  }
}
</script>