Search code examples
javascriptlaravelvue.jssecurityvuex

Vuex state management Vs Vue simple state management


I'm relatively new to using Vue.js. I am developing a webapp (using Laravel for the backend) and I was wondering what the difference, in terms of security, was between using Vuex and the simple state management of Vue.js. Let me explain: during registration/login I would like to save the user identifier (id or access token): can I manage the identifier with Vue.js or is it safer to use Vuex? Could I possibly save the identifier directly in the $root component of Vue.js (since its value will not have to be changed)?

Thank you all


Solution

  • Actually, the major difference between using Vue or Vuex state management is about controlling the growing data on your web app. As soon as you notice that your components need to have an abstract data source, it’s time to stop using props and events and switch to Vuex. BUT it is safe to control authentication on the frontend based solely on Vuex.

    Logic & data

    Sometimes you need to separate the implementation of a certain complex logic from your components, especially if this logic is related to other components in your system, like authentication.

    Vuex is a popular way to handle a complex app’s authentication in Vue. With Vuex, you’re able to handle the token’s availability and access controls, and route blocks throughout your app. Mutations, getters, and setters assist with this task.

    This pattern allows you to entirely separate the authentication logic from the app’s logic while keeping your authentication flow traceable and your data accessible.

    Vuex also eases unit testing on your whole app, which may be helpful if your app grows in complexity, making your state difficult to manage. However, you can absolutely complete testing without ever using Vuex.