Vue-Auth: The property 'beforeEach' is not defined and cannot be read

Question

Vue-Auth: The property 'beforeEach' is not defined and cannot be read

I'm currently working on integrating my VueJS SPA with a Laravel API.

I came across a plugin called vue-auth that seems to be perfect for handling role-based authentication:

Here's the Github link: https://github.com/websanova/vue-auth

And here's the documentation link:

While the plugin seems to meet my requirements, I'm facing challenges in implementing it in my application.

import Vue from 'vue';
import auth from '@websanova/vue-auth';
import authBearer from '@websanova/vue-auth/drivers/auth/bearer.js';
import httpAxios from '@websanova/vue-auth/drivers/http/axios.1.x.js';
import routerVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.js';

Vue.use(auth, {
    auth: authBearer,
    http: httpAxios,
    router: routerVueRouter,
    rolesKey: 'role'
});

However, when I try to use my application, I encounter this error message in my console:

Uncaught TypeError: Cannot read property 'beforeEach' of undefined
at Auth.beforeEach
at _initInterceptors
at new Auth

Interestingly, when I switch to using the vue-resource as the http driver (as per the documentation), I face another error:

Uncaught TypeError: Cannot read property 'interceptors' of undefined
at Auth.interceptor
at _initInterceptors
at new Auth

I've been stuck for a few hours now and despite searching extensively on the internet, I haven't found a working solution.

Thank you for taking the time to read this.

javascript vue.js vuejs2 vue-auth

Answer 1

Answer №1

For managing role-based authentication in my projects, I often rely on Laravel authentication methods such as JWT or Passport. When using Vue, you can implement role-based authentication by utilizing the beforeEach function within the router. Here is an example:

router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        next();
    } else {
        store.commit('setLoading', true);
        store.dispatch('checkAuth').then(r => {
            store.commit('setUser', r.data);
            next();
        }).catch(e => next('/login?redirect=' + to.path)).finally(() => {
            store.commit('setLoading', false);
        })
    }
})

Answer 2

For managing role-based authentication in my projects, I often rely on Laravel authentication methods such as JWT or Passport. When using Vue, you can implement role-based authentication by utilizing the beforeEach function within the router. Here is an example:

router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        next();
    } else {
        store.commit('setLoading', true);
        store.dispatch('checkAuth').then(r => {
            store.commit('setUser', r.data);
            next();
        }).catch(e => next('/login?redirect=' + to.path)).finally(() => {
            store.commit('setLoading', false);
        })
    }
})

Answer 3

Answer №2

My modification involved moving the

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })

code snippet above the beforeEach function.

Answer 4

My modification involved moving the

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })

code snippet above the beforeEach function.

Vue-Auth: The property 'beforeEach' is not defined and cannot be read

Answer №1

Answer №2

Similar questions

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Is there a way to remove a portion of a string?

Customizing v-model in a Vue component

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I am unable to execute Parcel in my project as it is not generating a distribution folder with the compiled file

Custom validation on the client side using ASP.NET and JavaScript WebMethods

The filtering function using jQuery and ajax

Encountering Datepicker Issue in Your Angularjs App?

What is the method to change lowercase and underscores to capitalize the letters and add spaces in ES6/React?

Utilizing optional parameters with React Router

Issues with HTTPS in Puppeteer and VUE JS

Is it common in Node.js to create multiple instances of "server" objects, but only connect one to a port?

My attempt at deploying my personal React App project on Vercel was unsuccessful

Converting an array into an object in Vue.js: A step-by-step guide

Unable to delete a dynamically inserted <select> element by using the removeChild method

Dividing the array into distinct subarray groups

Is there a way to access data from a different cart template containing personalized values on Shopify?

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

What is the process of exporting a module assigned to a variable in JavaScript?

Troubleshooting: Unable to preview Facebook Page plugin