JWT Authentication with Vuex and Vue.JS 3.0

vue-jwt

// router
import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue')
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue'),
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      next()
      return
    }
    next('/')
  } else {
    next()
  }
})

export default router

// store
import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
  state: {
    success: '',
    token: localStorage.getItem('token') || '',
    user: {}
  },

  mutations: {
    AUTH_REQUEST(state) {
      state.status = 'loading'
    },

    AUTH_SUCCESS(state, token, user) {
      state.status = 'success'
      state.token   = token
      state.user    = user
    },

    AUTH_ERROR(state) {
      state.status = 'error'
    },

    AUTH_LOGOUT(state) {
      state.status = ''
      state.token = ''
    },

  },

  actions: {
    LOGIN({ commit }, user) {

      return new Promise((resolve, reject) => {

        commit('AUTH_REQUEST')
        axios.post('http://laravel-jwt.test/api/login', {

          email: user.email,
          password: user.password

        })
          
        .then(response => {

            const token = response.data.token
            const user  = response.data.user

            localStorage.setItem('token', token)
            localStorage.setItem('user', JSON.stringify(user))

            axios.defaults.headers.common['Authorization'] = "Bearer" +token
            commit('AUTH_SUCCESS', token, user)

            resolve(response)

        }).catch(err => { 

            commit('AUTH_ERROR')
            localStorage.removeItem('token')

            reject(err)

        })
      })
    },

    REGISTER({ commit }, user) {

      return new Promise((resolve, reject) => {

        commit('AUTH_REQUEST')
        axios.post('http://laravel-jwt.test/api/register', {

          name: user.name,
          email: user.email,
          password: user.password

        })
          
        .then(response => {

            const token = response.data.token
            const user  = response.data.user

            localStorage.setItem('token', token)
            localStorage.setItem('user', JSON.stringify(user))

            axios.defaults.headers.common['Authorization'] = "Bearer" +token
            commit('AUTH_SUCCESS', token, user)

            resolve(response)

        }).catch(err => { 

            commit('AUTH_ERROR')
            localStorage.removeItem('token')

            reject(err)

        })
      })
    },

    LOGOUT({ commit }) {
      return new Promise((resolve) => {
        commit('AUTH_LOGOUT')
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        delete axios.defaults.headers.common['Authorization']
        resolve()
      })
    }
  },

  getters: {
    isLoggedIn: state => !!state.token,
    authStatus: state => state.status,
  },

  modules: {
  }
})

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Screenshot

REGISTER

LOGIN

Download Details:

Author: maulayyacyber

Source Code: https://github.com/maulayyacyber/vue3-vuex-authentication

#vuejs #vue #javascript