<repo_name>dktitov/codenames-client<file_sep>/src/store/store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        status: '',
        token: localStorage.getItem('token') || '',
        user: {},
        rooms: {}
    },
    mutations: {
        auth_request(state) {
            state.status = 'loading'
        },
        auth_success(state, payload) {
            state.status = 'success'
            state.token = payload.token
            state.user = payload.user

        },
        auth_error(state) {
            state.status = 'error'
        },
        logout(state) {
            state.status = ''
            state.token = ''
        },
        fetch_rooms_success(state, rooms) {
            state.rooms = rooms
        },
        fetch_room_success(state) {

        },
        create_room_success(state, room) {

        }
    },
    actions: {
        login({ commit }, user) {
            return new Promise((resolve, reject) => {
                commit('auth_request')
                axios({
                    url: 'http://localhost:3000/login',
                    data: user,
                    method: 'POST'
                })
                .then(resp => {
                    const user = resp.data.user
                    const token = resp.data.token


                    localStorage.setItem('token', token)

                    axios.defaults.headers.common['Authorization'] = token

                    commit('auth_success', { token, user })
                    resolve(resp)
                })
                .catch(err => {
                    commit('auth_error')
                    localStorage.removeItem('token')
                    reject(err)
                })
            })
        },
        register({commit}, user) {
            return new Promise((resolve, reject) => {
                commit('auth_request')
                axios({
                    url: 'http://localhost:3000/registration',
                    data: user,
                    method: 'POST'
                })
                .then(resp => {
                    const token = resp.data.token
                    const user = resp.data.user

                    localStorage.setItem('token', token)
                    axios.defaults.headers.common['Authorization'] = token
                    commit('auth_success', token, user)
                    resolve(resp)
                })
                .catch(err => {
                    commit('auth_error')
                    localStorage.removeItem('token')
                    reject(err)
                })
            })
        },
        logout({ commit }) {
            return new Promise((resolve, reject) => {
                commit('logout')
                localStorage.removeItem('token')
                delete axios.defaults.headers.common['Authorization']
                resolve()
            })
        },

        fetchRooms({ commit }) {
            return new Promise((resolve, reject) => {
                axios({
                    url: 'http://localhost:3000/rooms',
                    method: 'GET'
                }).then(resp => {
                    commit('fetch_rooms_success', resp.data)
                    resolve(resp)
                })
            })
        },
        fetchRoom({commit}, id) {
            return new Promise((resolve, reject) => {
                axios({
                    url: `http://localhost:3000/rooms/${id}`,
                    method: 'GET'
                }).then(resp => {
                    commit('fetch_room_success', resp.data)
                    resolve(resp)
                })
            })
        },
        createRoom({commit, getters}, name) {
            return new Promise((resolve, reject) => {
                console.log(getters)
                axios({
                    url: 'http://localhost:3000/rooms',
                    data: { name, email: getters.email },
                    method: 'POST'
                }).then(resp => {
                    commit('create_room_success', resp.data)
                    resolve(resp)
                })
            })
        }
    },
    getters: {
        isLoggedIn: state => !!state.token,
        authStatus: state => state.user.status,
        rooms: state => state.rooms,
        email: state => state.user.email
    }
})
<file_sep>/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/store'
import Welcome from '@/components/Welcome'
import Login from '@/components/Login'
import Register from '@/components/Register'
import RoomsList from '@/components/RoomsList'
import Room from '@/components/Room'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'welcome',
      component: Welcome
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    },
    {
      path: '/rooms',
      name: 'rooms',
      component: RoomsList,
      meta: {
        requireAuth: true
      }
    },
    {
      path: '/rooms/:id',
      name: 'room',
      component: Room,
      meta: {
        requireAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (store.getters.isLoggedIn) {
      next()

      return
    }

    next('/login')
  } else {
    next()
  }
})

export default router