LoginForm.vue

<script>
    export default {
        name: "login",
        data() {
            return {
                user: {
                    username: "",
                    password: ""
                },
                submitted: false
            };
        },
        methods: {
            login() {
                this.submitted = true;
                this.$validator.validate().then(valid => {
                    if (valid) {
                        this.$store
                            .dispatch("retrieveToken", {
                                username: this.user.username,
                                password: this.user.password
                            })
                            .then(response => {
                                this.$router.push({ name: "dash" });
                            });
                    }
                });
            }
        }
    };
</script>

Logout.vue

<template> </template>
<script>
    export default {
        created() {
            this.$store.dispatch("destroyToken").then(response => {
                this.$router.push({ name: "home" });
            });
        }
    };
</script>

main.js

import Vue from "vue";
import VueRouter from "vue-router";
import VeeValidate from "vee-validate";
import { ValidationProvider } from "vee-validate";
import Master from "./layouts/Master";
import { store } from "./store";
import routes from "./routes";

Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VeeValidate);
Vue.component("ValidationProvider", ValidationProvider);

const router = new VueRouter({
    mode: "history",
    routes
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.loggedIn) {
            next({
                name: "login"
            });
        } else {
            next();
        }
    } else if (to.matched.some(record => record.meta.requiresVisitor)) {
        if (store.getters.loggedIn) {
            next({
                name: "dash"
            });
        } else {
            next();
        }
    } else {
        next();
    }
});

new Vue({
    el: "#app",
    components: { Master },
    store,
    router,
    template: "<Master />"
});

routes.js

import Home from "./views/Home";
import LoginPage from "./views/LoginPage";
import SignupPage from "./views/SignupPage";
import BOSignupPage from "./views/BOSignupPage";
import VASignupPage from "./views/VASignupPage";
import VAInformationPage from "./views/VAInformationPage";
import Activation from "./views/Activation";
import NotFound from "./views/NotFound";
import BoDash from "./views/BusinessOwnerDash";
import BusinessOnboarding from "./views/BusinessOwnerOnboarding";
import Events from "./views/Events";
import Logout from "./components/Logout";

const routes = [
    {
        path: "*",
        name: "notfound",
        component: NotFound
    },
    {
        path: "/",
        name: "home",
        component: Home
    },
    {
        path: "/login",
        name: "login",
        component: LoginPage,
        meta: {
            requiresVisitor: true
        }
    },
    {
        path: "/logout",
        name: "logout",
        component: Logout
    },
    {
        path: "/signup",
        name: "signup",
        component: SignupPage,
        meta: {
            requiresVisitor: true
        }
    },
    {
        path: "/signup/businessowner",
        name: "BOSigupPage",
        component: BOSignupPage,
        meta: {
            requiresVisitor: true
        }
    },

    {
        path: "/signup/virtualassistant",
        name: "VASignupPage",
        component: VASignupPage,
        meta: {
            requiresVisitor: true
        }
    },
    {
        path: "/signup/virtualassistant/personalinformation",
        name: "VAInformationPage",
        component: VAInformationPage,
        meta: {
            requiresVisitor: true
        }
    },
    {
        path: "/signup/activation",
        name: "activation",
        component: Activation
    },
    {
        path: "/dashboard/businessownerdash",
        name: "dash",
        component: BoDash,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: "/dashboard/businessownerdash/events",
        name: "events",
        component: Events
    },
    {
        path: "/signup/businessonboarding",
        name: "onboarding",
        component: BusinessOnboarding
    }
];

export default routes;

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);
axios.defaults.baseURL = "";

export const store = new Vuex.Store({
    state: {
        token: localStorage.getItem("access_token") || null
    },
    getters: {
        loggedIn(state) {
            return state.token !== null;
        }
    },
    mutations: {
        retrieveToken(state, token) {
            state.token = null;
        },
        destroyToken(state) {
            state.token = null;
        }
    },
    actions: {
        signup(context, data) {
            return new Promise((resolve, reject) => {
                axios
                    .post("/signup", {
                        email: data.username,
                        password: data.password,
                        password_confirmation: data.confirmPassword
                    })
                    .then(response => {
                        resolve(response);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        retrieveToken(context, data) {
            return new Promise((resolve, reject) => {
                axios
                    .post("/login", {
                        username: data.username,
                        password: data.password
                    })
                    .then(response => {
                        const token = response.data.access_token;
                        localStorage.setItem("access_token", token);
                        context.commit("retrieveToken", token);
                        resolve(response);
                    })
                    .catch(error => {
                        console.log(error);
                        reject(error);
                    });
            });
        },
        destroyToken(context) {
            axios.defaults.headers.common["Authorization"] =
                "Bearer " + context.state.token;
            if (context.getters.loggedIn) {
                return new Promise((resolve, reject) => {
                    axios
                        .post("/logout")
                        .then(response => {
                            localStorage.removeItem("access_token");
                            context.commit("destroyToken");
                            resolve(response);
                        })
                        .catch(error => {
                            localStorage.removeItem("access_token");
                            context.commit("destroyToken");
                            reject(error);
                        });
                });
            }
        }
    }
});