websanova / vue-auth

A simple light-weight authentication library for Vue.js
MIT License
2.36k stars 380 forks source link

Router not loaded for some reason #598

Closed fmarcoux96 closed 4 years ago

fmarcoux96 commented 4 years ago

Hi,

I am trying to use VueAuth with the Axios and VueRouter drivers, but somehow the router isn't found by the VueAuth when it actually is configured.

Here's my main app.js file:

import './bootstrap'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'
import VueAxios from 'vue-axios'
//import Vuex from 'vuex'
import VueSweetalert2 from 'vue-sweetalert2'
import VueProgressBar from 'vue-progressbar'
import './registerServiceWorker'
import ArgonDashboard from './plugins/argon-dashboard'

import VueAuth from '@websanova/vue-auth'
import authBearer from '@websanova/vue-auth/dist/drivers/auth/bearer'
import authVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x'
import authAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x'

Vue.config.productionTip = false
Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Axios.defaults.withCredentials = true;

Vue.use(ArgonDashboard)
Vue.use(VueSweetalert2)
Vue.use(VueProgressBar)
//Vue.use(Vuex)
Vue.use(VueAxios, Axios)
Vue.use(VueAuth, {
    auth: authBearer,
    http: authAxios,
    router: authVueRouter,
    rolesKey: 'role',
    loginData: {
        method: 'POST',
        redirect: { name: 'dashboard' },
        staySignedIn: true,
        fetchUser: true,
        url: '/api/login'
    },
    logoutData: {
        makeRequest: true,
        redirect: { name: 'login' },
        method: 'POST',
        url: '/api/logout'
    },
    fetchData: {
        enabled: true,
        url: '/api/current-user',
        method: 'GET'
    },
    refreshData: {
        enabled: false
    }
}, router)

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

There's also an issue where if I don't set Vue.axios = Axios, it doesn't work. The driver cannot find Axios and gives an error because the interceptors cannot be set.

Here's the error:

vue-axios.min.js?a7fe:1 Uncaught TypeError: Cannot set property 'axios' of undefined
    at o (vue-axios.min.js?a7fe:1)
    at Function.Vue.use (vue.common.dev.js?4650:5098)
    at eval (app.js?6d40:39)
    at Module../resources/js/app.js (app.js:1663)
    at __webpack_require__ (app.js:64)
    at Object.0 (app.js:2909)
    at __webpack_require__ (app.js:64)
    at app.js:199
    at app.js:202
fmarcoux96 commented 4 years ago

Fixed by adding this right before Vue.use(VueAuth...:

Vue.router = router