search

websanova / vue-auth

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

Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set. #78

Closed guilhermewaess closed 7 years ago

guilhermewaess commented 7 years ago

Hi! I'm facing the follow problem:

Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

Here is my main.js:

import Vue from 'vue';
import App from './App.vue';
import Vuex from 'vuex';
// import { sync } from 'vuex-router-sync';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import routes from './routes';
import mainStore from './vuex/store';

Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(VueResource);

Vue.use(require('@websanova/vue-auth'), {
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'),
    auth: require('@websanova/vue-auth/drivers/auth/bearer'),
    http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x'),
})

const router = new VueRouter({routes});
const store = new Vuex.Store(mainStore);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router: router,
    store: store,
    template: '<App/>',
    components: { App }
});
websanova commented 7 years ago

You need to set Vue.router = ...

On Dec 26, 2016 08:06, "Guilherme Waess" notifications@github.com wrote:

Hi! I'm facing the follow problem:

Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

Here is my main.js:

`import Vue from 'vue'; import App from './App.vue'; import Vuex from 'vuex'; // import { sync } from 'vuex-router-sync'; import VueRouter from 'vue-router'; import VueResource from 'vue-resource'; import routes from './routes'; import mainStore from './vuex/store';

Vue.use(Vuex); Vue.use(VueRouter); Vue.use(VueResource);

Vue.use(require('@websanova/vue-auth'), { router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'), auth: require('@websanova/vue-auth/drivers/auth/bearer'), http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x'), })

const router = new VueRouter({routes}); const store = new Vuex.Store(mainStore);

/ eslint-disable no-new / new Vue({ el: '#app', router: router, store: store, template: '', components: { App } });`

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/78, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcy_J-ZEg7zhjOYldbrYpfpjPlos25ks5rLxMTgaJpZM4LVfvk .

guilhermewaess commented 7 years ago

Damn! its realy simple, how can't i see :( Sorry about that @websanova ... i think now is working ^^ And thanks for your fast reply ^^

liuyatao commented 7 years ago

Hi, I have already set Vue.router=router,but still have the problem:Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
import routes from './routes'
import Mock from './mock'
import iview from 'iview'
import 'iview/dist/styles/iview.css'
import VueClipboard from 'vue-clipboard2'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueAuth from '@websanova/vue-auth'

Mock.bootstrap();
Vue.use(VueClipboard)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(iview)
Vue.use(VueAxios, axios)

Vue.use(VueAuth, {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  rolesVar: 'role'
});

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

new Vue({
    el: '#app',
    template: '<App/>',
    router,
    store,
    components: { App }
}).$mount('#app')
websanova commented 7 years ago

Can you try to console.log Vue.riuter in a few places to verify it's there.

On Jul 1, 2017 3:53 PM, "刘亚涛" notifications@github.com wrote:

Hi, I has already set Vue.router=router,but still have the problem,Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import store from './vuex/store' import Vuex from 'vuex' import routes from './routes' import Mock from './mock' import iview from 'iview' import 'iview/dist/styles/iview.css' import VueClipboard from 'vue-clipboard2' import axios from 'axios' import VueAxios from 'vue-axios' import VueAuth from '@websanova/vue-auth'

Mock.bootstrap(); Vue.use(VueClipboard) Vue.use(VueRouter) Vue.use(Vuex) Vue.use(iview) Vue.use(VueAxios, axios)

Vue.use(VueAuth, { auth: require('@websanova/vue-auth/drivers/auth/bearer.js'), http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'), router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'), rolesVar: 'role' });

const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.path == '/login') { sessionStorage.removeItem('user'); } let user = JSON.parse(sessionStorage.getItem('user')); if (!user && to.path != '/login') { next({ path: '/login' }) } else { next() } })

Vue.router=router

new Vue({ el: '#app', template: '', router, store, components: { App } }).$mount('#app')

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/78#issuecomment-312417659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcyzw7jEmWoTGvzgx0agRZm7_Z7qNjks5sJfsGgaJpZM4LVfvk .

websanova commented 7 years ago

Oh, wait....lol

Yea, might be good idea to settle router before setting the auth plugin.

On Jul 1, 2017 4:00 PM, "Rob" rob@websanova.com wrote:

Can you try to console.log Vue.riuter in a few places to verify it's there.

On Jul 1, 2017 3:53 PM, "刘亚涛" notifications@github.com wrote:

Hi, I has already set Vue.router=router,but still have the problem,Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import store from './vuex/store' import Vuex from 'vuex' import routes from './routes' import Mock from './mock' import iview from 'iview' import 'iview/dist/styles/iview.css' import VueClipboard from 'vue-clipboard2' import axios from 'axios' import VueAxios from 'vue-axios' import VueAuth from '@websanova/vue-auth'

Mock.bootstrap(); Vue.use(VueClipboard) Vue.use(VueRouter) Vue.use(Vuex) Vue.use(iview) Vue.use(VueAxios, axios)

Vue.use(VueAuth, { auth: require('@websanova/vue-auth/drivers/auth/bearer.js'), http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'), router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'), rolesVar: 'role' });

const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.path == '/login') { sessionStorage.removeItem('user'); } let user = JSON.parse(sessionStorage.getItem('user')); if (!user && to.path != '/login') { next({ path: '/login' }) } else { next() } })

Vue.router=router

new Vue({ el: '#app', template: '', router, store, components: { App } }).$mount('#app')

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/78#issuecomment-312417659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcyzw7jEmWoTGvzgx0agRZm7_Z7qNjks5sJfsGgaJpZM4LVfvk .

liuyatao commented 7 years ago

@websanova You are great，it works ,and I question a studip question.Thanks very much

websanova commented 7 years ago

:-)

On Jul 3, 2017 12:58, "刘亚涛" notifications@github.com wrote:

@websanova https://github.com/websanova You are great，it works ,and I question a studip question.Thanks very much

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/78#issuecomment-312549789, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcy4ZsCHDV62BB5RtdT5K0fJnXtJwQks5sKHUOgaJpZM4LVfvk .

omly97 commented 4 years ago

I had the same problem after set Vue.router = ...

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import DashboardLayout from '@/layout/DashboardLayout'
import AuthLayout from '@/layout/AuthLayout'
Vue.use(VueRouter)

export default new VueRouter({
    linkExactActiveClass: 'active',
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: 'dashboard',
            component: DashboardLayout,
            children: [
                {
                    path: '/dashboard',
                    name: 'dashboard',
                    component: () => import('./views/Dashboard.vue'),
                    meta: {
                        auth: {
                            roles: [1, 2],
                            redirect: {name: 'login'}
                        },
                    }
                },
                {
                    path: '/users',
                    name: 'Users',
                    component: () => import('./views/User.vue'),
                    meta: {
                        auth: {
                            roles: 1,
                            redirect: {name: 'login'}
                        },
                    }
                },
                {
                    path: '/pointbanques',
                    name: 'Point Banques',
                    component: () => import('./views/PointBanque.vue'),
                    meta: {
                        auth: {
                            roles: [1, 2],
                            redirect: {name: 'login'}
                        },
                    }
                },
                {
                    path: '/flux/historique',
                    name: 'Flux Historique',
                    component: () => import('./views/FluxHistorique.vue'),
                    meta: {
                        auth: {
                            roles: [1, 2],
                            redirect: {name: 'login'}
                        },
                    }
                },
                {
                    path: '/flux/historique/:date',
                    name: 'Flux Date',
                    component: () => import('./views/FluxDate.vue'),
                    meta: {
                        auth: {
                            roles: [1, 2],
                            redirect: {name: 'login'}
                        },
                    }
                }
            ]
        },
        {
            path: '/',
            redirect: 'login',
            component: AuthLayout,
            children: [
                {
                    path: '/login',
                    name: 'login',
                    component: () => import('./views/Login.vue'),
                    meta: {
                        auth: false
                    },
                }
            ]
        }
    ]
})

auth.js

import bearer from '@websanova/vue-auth/drivers/auth/bearer'
import axios from '@websanova/vue-auth/drivers/http/axios.1.x'
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x'

const config = {
    router: router,
    auth: bearer,
    http: axios,
    tokenDefaultName: 'raki-jwt-auth',
    tokenStore: ['localStorage'],
    rolesVar: 'user_role_id',

    loginData: {
        url: 'auth/login',
        method: 'POST',
        redirect: '',
        fetchUser: true
    },
    logoutData: {
        url: 'auth/logout',
        method: 'POST',
        redirect: '/',
        makeRequest: true
    },
    fetchData: {
        url: 'auth/user',
        method: 'GET',
        enabled: true
    },
    refreshData: {
        url: 'auth/refresh',
        method: 'GET',
        enabled: true,
        interval: 30
    }
}

export default config

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import ArgonDashboard from './plugins/argon-dashboard'
import swal from 'sweetalert';
import VueLoading from 'vuejs-loading-plugin'

import router from './router'
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueAuth from '@websanova/vue-auth';
import auth from './auth';

Vue.use(VueAxios, axios);
Vue.use(VueAuth, auth);
Vue.use(VueLoading);
Vue.use(ArgonDashboard)

window.swal = swal;

Vue.config.productionTip = false
Vue.router = router

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

I Have this message in browser console: Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

alimuradov commented 2 years ago

I have the same problem.