Hello,
I'm having trouble extending my app with your vue-auth plugin. I'm quite new to Vue.JS, and your plugin is the first one that gives me headaches. When I try to include your plugin according to your documentation, it throws me the error:
Uncaught Error: [vue-auth-plugin] vue-router is a required dependency
I started with a SSR-starter package and I'm extending it for the last couple of weeks. This SSR package had a router predefined, and it exports the new Router() directly, so I'm not able to bind it to the Vue instance in the way vue-auth requires.
This is my current router configuration:
`import Vue from 'vue';
import Router from 'vue-router';
import VueAuth from '@d0whc3r/vue-auth-plugin';
import { filenameToCamelCase, requireAll } from 'src/utils';
import { prefetchMixin } from 'src/utils/ssr';
const auth_options = {
authMeta: 'auth',
rolesVar: 'roles',
tokenDefaultName: 'default_auth_token',
userDefaultName: 'default_auth_user',
tokenStore: ['cookie'],
headerTokenReplace: '{auth_token}',
tokenType: 'Bearer',
vuexStoreSpace: 'vue-auth',
authRedirect: '/login',
loginData: {
url: '/auth/login',
method: 'POST',
redirect: '/user',
headerToken: 'Authorization',
fetchUser: false,
customToken: (response) => response.data['token'],
},
logoutData: {
url: '/auth/logout',
method: 'POST',
redirect: '/login',
makeRequest: false,
},
fetchItem: '',
fetchData: {
url: '/auth/user',
method: 'GET',
interval: 30,
enabled: false,
},
refreshData: {
url: '/auth/refresh',
method: 'GET',
interval: 30,
enabled: false,
},
};
Vue.use(Router);
Vue.use(VueAuth, auth_options);
const routes = [];
let route404, pathMap;
if (process.env.NODE_ENV !== 'production') pathMap = {};
// register all components in directory as routes (excepting files/folders starting from "")
requireAll(require.context('src/pages/', true, /^(?:(?!/?).)+.(vue|js)$/), (component, name) => {
const route = {
component,
// generate route path based on file path
// remove file extension and '/index'
path: name.substr(1).replace(/(/index)?.[a-zA-Z0-9]+$/, '') +
// allow components adding their own route parameters
(component.routePath ? ('/' + component.routePath) : ''),
// add meta fields if there are any
meta: component.routeMeta,
// sub routes
children: component.routes
};
// prefetch data for all route components
if (!component.mixins) component.mixins = [];
component.mixins.push(prefetchMixin);
if (route.path === '/404') {
// generate component name automatically
if (!component.name) component.name = 'NotFoundPage';
route.path = '*';
if (!route.meta) route.meta = { statusCode: 404 };
else if (!route.meta.statusCode) route.meta.statusCode = 404;
route404 = route;
}
else {
if (route.path === '') route.path = '/';
// generate component name automatically
if (!component.name) component.name = filenameToCamelCase(name) + 'Page';
// let components create their own sub routes
if (component.routes) route.children = component.routes;
// map route parameters to component props by default
route.props = component.routeProps === undefined ? true : component.routeProps;
if (process.env.NODE_ENV !== 'production') {
if (pathMap[route.path])
throw new Error(`Duplicate path in vue-router: ${route.path}, components are: ${pathMap[route.path]}, ${name}`);
pathMap[route.path] = name;
}
routes.push(route);
}
});
// catch-all route (404)
if (route404) routes.push(route404);
// we should return factory for SSR (runInNewContext: false)
export default router => new Router({
routes,
linkExactActiveClass: "is-active",
mode: 'history',
scrollBehavior(to, from, saved) {
if (to.path === from.path || to.meta && to.meta.keepScrollPosition) return saved;
// use to restore scroll position after prefetching within component code
if (saved) to.meta.scrollPosition = saved;
return saved || { x: 0, y: 0 };
}
});
Vue.router = router; <-----`
Could you give me a hint or example how I have to define my constant, without breaking the SSR-adjusted export? (export default router => new Router)
Kind Regards,
Dennis
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent