Vue.js - Helper function that accesses the app instance

Question

Let's say I want to make a utility function that redirects users to a route if they aren't authenticated.

This function resides in a utils.js file; it isn't declared in any one component.

// utils.js
export function redirectIfNotAuthenticated (app, path) {
  if (!app.$store.state.isAuthenticated) {
    app.$router.push(path)
  }
}

this function is then imported into single-file components and called like: redirectIfNotAuthenticated(this, '/login').

I think having an app parameter and having to explicitly pass this from the component is ugly. Is there a better way to have a stateless helper function access the scope of the calling component in vue? As in, is there a way to bind functions that don't live inside of a .vue file to the calling instance of the vue app?

blaz · Accepted Answer · 2021-07-31 10:46:20Z

1

To handle redirection, instead of putting logic inside component, you can use vue-router's navigation guards to handle on top level instead:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if (!isAuthenticationRequired(to)) { // your logic to ignore authentication for custom routes, e.g. login 
    next();
  } else if (!isAuthenticated()) { // your logic which needs access to Vuex's store
    next('login');
  } else {
    next();
  }
})

Then, if you create a store object and add it to your Vue app instance, like in the default example of Vuex , you can refer to the object directly without any need to access the Vue app, since same store object is used:

// utils.js
import store from '../your_path/your_file.js';

export function isAuthenticated() {
  return store.state.isAuthenticated;
}

answered Jul 31, 2021 at 10:46

blaz

4,07825 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samuele B. Over a year ago

+1. From a business logic, separation-of-concern standpoint, where would be the best place to define functions like isAuthenticationRequired in my project?

blaz Over a year ago

@SamueleB. Since the function take to as input, and likely nothing else from anything other parts (e.g. store, views, etc.), it can be a helper function for your router logic. Personally I would create a file named utils/routingUtils.js to put it inside, but it's more of personal taste.

Boussadjra Brahim · Accepted Answer · 2021-07-31 10:47:42Z

0

The best practice in this situation is to use router navigation guards :

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
   next(vm=>!vm.$store.state.isAuthenticated)
//vm refers to the vue instance
})

answered Jul 31, 2021 at 10:47

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Vue.js - Helper function that accesses the app instance

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related