Laravel Vue js authentication middleware

Question

I creating web application with laravel as backend and vue as frontend (SPA). but for authentication I do not use jwt auth but instead use the normal laravel auth session. so when the web was first loaded I put a global variable to access the user information in order to setup middleware.

Global user information.

<script>
    window.App = {
        config: @json($config),
        user: @json($currentUser)
    }
</script>

So in vue js I'm make middleware for auth like this.

Auth.js

export default (to, from, next) => {
  if (!window.App.user) {
    window.location.href = "/login";
  } else {
    next();
  }
};

Guest.js

export default (to, from, next) => {
  if (window.App.user) {
    next({ name: "home" });
  } else {
    next();
  }
};

In component I had to do like so.

Vue.prototype.$auth = window.App.user;
<template>

</template>

<script>
export default {
   methods: {
      post() {
        if (this.$auth) {
           // request to server
        }
      }
   }
}
</script>

Is this good to implement authentication middleware like this? can the client modify window.App.user? can the client access the server just by modifying window.App.user? something like in the console

window.App.user = { id: 1, name: "Test" }

Mortada Jafar Mortada Jafar · Accepted Answer · 2020-07-20T12:18:08

Is this good to implement authentication middleware like this?

yes just improve its:

helper funcation:

export function isAuthenticated() {
   return window.App.user !== null; //or !== undefinded 
}

Auth.js

export default (to, from, next) => {
  //this tested using Vue Router 
   const publicPages = ['/login'];
   const authRequired = !publicPages.includes(to.path);
    
   if (authRequired && !isAuthenticated()) {
     next('/login'); //  or   window.location.href = "/login";
   }else{
     next('home');
   }
}

can the client modify window.App.user?

yes every thing in client side is editable

can the client access the server just by modifying window.App.user?

This is related to your server logic (middlewares)

Laravel Vue js authentication middleware

1 Answers