Fixed authentication process to let router stay on opened page

package.json

@@ -19,7 +19,7 @@
     "chalk": "^1.1.3",
     "cross-env": "^5.0.5",
     "cross-spawn": "^5.1.0",
-    "cypress": "^3.0.2",
+    "cypress": "^3.2.0",
     "eslint": "^4.13.1",
     "eslint-config-standard": "^11.0.0-beta.0",
     "eslint-friendly-formatter": "^3.0.0",

resources/assets/js/app.js

@@ -40,10 +40,13 @@ axios.interceptors.request.use(function (config) {
 
 // Show toast with message for non OK responses
 axios.interceptors.response.use(response => response, error => {
-  store.dispatch('addToastMessage', {
-    text: error.response.data.message || 'Request error status: ' + error.response.status,
-    type: 'danger'
-  })
+  // Ignore /me url
+  if (! error.response.config.url.includes('/me')) {
+    store.dispatch('addToastMessage', {
+      text: error.response.data.message || 'Request error status: ' + error.response.status,
+      type: 'danger'
+    })
+  }
   return Promise.reject(error)
 })
 
@@ -63,8 +66,3 @@ new Vue({
   router,
   store,
 })
-
-// Check user login status
-store.dispatch('checkLogin').then(() => {
-  router.replace('/dashboard')
-}).catch(() => {})

resources/assets/js/router.js

@@ -2,16 +2,15 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import store from './vuex/store'
 import {sync} from 'vuex-router-sync'
-import includes from 'lodash-es/includes'
 
 Vue.use(VueRouter)
 
 const routes = [
   {path: '/', component: require('./components/pages/front/Front.vue')},
 
-  {path: '/login', component: require('./components/pages/auth/Login.vue')},
-  {path: '/logout', component: require('./components/pages/auth/Logout.vue')},
-  {path: '/register', component: require('./components/pages/auth/Register.vue')},
+  {path: '/login', component: require('./components/pages/auth/Login.vue'), meta: {guestOnly: true}},
+  {path: '/logout', component: require('./components/pages/auth/Logout.vue'), meta: {requiresAuth: true}},
+  {path: '/register', component: require('./components/pages/auth/Register.vue'), meta: {guestOnly: true}},
   {path: '/profile', component: require('./components/pages/auth/Profile.vue'), meta: {requiresAuth: true}},
 
   {path: '/dashboard', component: require('./components/pages/dashboard/Dashboard.vue'), meta: {requiresAuth: true}},
@@ -54,12 +53,21 @@ sync(store, router)
 /**
  * Authenticated routes
  */
-router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth) && ! store.state.auth.me) {
+router.beforeEach(async (to, from, next) => {
+  if (! store.state.auth.me && ! store.state.auth.authChecked) {
+    await store.dispatch('checkLogin')
+      .catch(() => {})
+  }
+  const me = store.state.auth.me
+
+  if (to.matched.some(record => record.meta.guestOnly) && me) {
+    // Guest only page, dont follow there when user is authenticated
+    next(false)
+  } else if (to.matched.some(record => record.meta.requiresAuth) && ! me) {
     // if route requires auth and user isn't authenticated
     next('/login')
-  } else if (to.matched.some(record => record.meta.requiresAdmin) && (! store.state.auth.me ||
-      ! includes(['admin', 'manager'], store.state.auth.me.role))) {
+  } else if (to.matched.some(record => record.meta.requiresAdmin) &&
+    (! me || ! ['admin', 'manager'].includes(store.state.auth.me.role))) {
     // if route required admin or manager role
     next('/login')
   } else {

resources/assets/js/vuex/modules/auth.js

@@ -3,36 +3,29 @@ import * as Config from '../../config'
 
 const state = {
   me: null, // Logged in user
+  accessToken: localStorage.getItem('access_token'),
+  authChecked: false,
 }
 
 const actions = {
 
-  checkLogin ({commit, dispatch}) {
+  checkLogin ({commit}) {
     commit('CHECK_LOGIN')
 
-    const accessToken = localStorage.getItem('access_token')
-
     return new Promise((resolve, reject) => {
-      if (! accessToken) {
-        commit('CHECK_LOGIN_FAIL')
-        return reject(new Error('No access token stored'))
-      }
-
       axios.get(Config.apiPath + 'user/me')
         .then(
           response => {
             commit('CHECK_LOGIN_OK', response.data)
             resolve()
           })
         .catch(error => {
-          localStorage.removeItem('access_token')
           commit('CHECK_LOGIN_FAIL')
           reject(error.response.data)
         })
     })
   },
 
-
   login ({commit, dispatch}, form) {
     commit('LOGIN')
 
@@ -43,7 +36,7 @@ const actions = {
             const accessToken = response.data.access_token
             localStorage.setItem('access_token', accessToken)
 
-            commit('LOGIN_OK', response.data.user)
+            commit('LOGIN_OK', {user: response.data.user, accessToken})
             resolve()
           })
         .catch(error => {
@@ -53,7 +46,7 @@ const actions = {
     })
   },
 
-  logout ({commit, dispatch}) {
+  logout ({commit}) {
     commit('LOGOUT_OK')
 
     localStorage.removeItem('access_token')
@@ -69,7 +62,7 @@ const actions = {
             const accessToken = response.data.access_token
             localStorage.setItem('access_token', accessToken)
 
-            commit('REGISTER_OK', response.data.user)
+            commit('REGISTER_OK', {user: response.data.user, accessToken})
             resolve()
           })
         .catch(error => {
@@ -102,18 +95,27 @@ const mutations = {
 
   CHECK_LOGIN_OK (state, user) {
     state.me = user
+    state.authChecked = true
+  },
+
+  CHECK_LOGIN_FAIL (state) {
+    state.accessToken = null
+    state.authChecked = true
   },
 
-  LOGIN_OK (state, user) {
+  LOGIN_OK (state, {user, accessToken}) {
     state.me = user
+    state.accessToken = accessToken
   },
 
   LOGOUT_OK (state) {
     state.me = null
+    state.accessToken = null
   },
 
-  REGISTER_OK (state, user) {
+  REGISTER_OK (state, {user, accessToken}) {
     state.me = user
+    state.accessToken = accessToken
   },
 
   UPDATE_PROFILE_OK (state, user) {