How to set custom middlewares in Vue.js

I've been working on a college project by Laravel & Vue.js. I'm almost new in Vue.js.

I've idea about laravel middleware, but in my project, I want to make and set custom middlewares with combination with vue-router and vuex. For example auth & guest middleware as basics & If I additionally create any middleware, that should work also, I've not found any docs about middleware in vue.js docs.

Here's my store/auth module:

import axios from 'axios'
import Cookies from 'js-cookie'
import * as types from '../mutation-types'

// state
export const state = {
    user: null,
    token: Cookies.get('token')
}

// getters
export const getters = {
    user: state => state.user,
    token: state => state.token,
    check: state => state.user !== null
}

// mutations
export const mutations = {
    [types.SAVE_TOKEN] (state, { token, remember }) {
        state.token = token
        Cookies.set('token', token, { expires: remember ? 365 : null })
    },

    [types.FETCH_USER_SUCCESS] (state, { user }) {
        state.user = user
    },

    [types.FETCH_USER_FAILURE] (state) {
        state.token = null
        Cookies.remove('token')
    },

    [types.LOGOUT] (state) {
        state.user = null
        state.token = null

        Cookies.remove('token')
    },

    [types.UPDATE_USER] (state, { user }) {
        state.user = user
    }
}

// actions
export const actions = {
    saveToken ({ commit, dispatch }, payload) {
        commit(types.SAVE_TOKEN, payload)
    },

    async fetchUser ({ commit }) {
        try {
            const { data } = await axios.get('/api/user')
            commit(types.FETCH_USER_SUCCESS, { user: data })
        } catch (e) {
            commit(types.FETCH_USER_FAILURE)
        }
    },

    updateUser ({ commit }, payload) {
        commit(types.UPDATE_USER, payload)
    },

    async logout ({ commit }) {
        try {
            await axios.post('/api/logout')
        } catch (e) { }

        commit(types.LOGOUT)
    },

    async fetchOauthUrl (ctx, { provider }) {
        const { data } = await axios.post(`/api/oauth/${provider}`)
        return data.url
    }
}

How can I create and call middleware in vue template.

Please suggest if store/auth should have any changes!

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2ZE0W46
via IFTTT