501 lines
16 KiB
JavaScript
501 lines
16 KiB
JavaScript
import store from '@state/store'
|
|
|
|
export default [
|
|
{
|
|
path: '/',
|
|
name: 'home',
|
|
meta: {
|
|
authRequired: true,
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('vehicles/fetchVehicles')
|
|
.then((vehicles) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.vehicles = vehicles
|
|
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('users/me')
|
|
.then((me) => {
|
|
next()
|
|
})
|
|
// Continue to the route.
|
|
})
|
|
.catch((ex) => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
console.log(ex)
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
component: () => lazyLoadView(import('@views/home.vue')),
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/initialize',
|
|
name: 'initialize',
|
|
component: () => lazyLoadView(import('@views/initialize.vue')),
|
|
meta: {
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
// If the user is already logged in
|
|
|
|
if (store.getters['auth/isInitialized']) {
|
|
next({ name: 'login' })
|
|
}
|
|
|
|
if (store.getters['auth/loggedIn']) {
|
|
// Redirect to the home page instead
|
|
next({ name: 'home' })
|
|
} else {
|
|
// Continue to the login page
|
|
next()
|
|
}
|
|
},
|
|
},
|
|
},
|
|
{
|
|
path: '/login',
|
|
name: 'login',
|
|
component: () => lazyLoadView(import('@views/login.vue')),
|
|
meta: {
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
// If the user is already logged in
|
|
|
|
if (!store.getters['auth/isInitialized']) {
|
|
// Redirect to the home page instead
|
|
console.log('App is not initialized')
|
|
next({ name: 'initialize' })
|
|
}
|
|
|
|
if (store.getters['auth/loggedIn']) {
|
|
// Redirect to the home page instead
|
|
next({ name: 'home' })
|
|
} else {
|
|
// Continue to the login page
|
|
next()
|
|
}
|
|
},
|
|
},
|
|
},
|
|
{
|
|
path: '/profile',
|
|
name: 'profile',
|
|
component: () => lazyLoadView(import('@views/profile.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
roles: ['ADMIN'],
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/admin/settings',
|
|
name: 'site-settings',
|
|
component: () => lazyLoadView(import('@/src/router/views/siteSettings.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
roles: ['ADMIN'],
|
|
},
|
|
props: (route) => ({
|
|
user: store.state.auth.currentUser || {},
|
|
settings: store.state.utils.settings || {},
|
|
}),
|
|
},
|
|
{
|
|
path: '/admin/users',
|
|
name: 'users',
|
|
component: () => lazyLoadView(import('@/src/router/views/users.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
roles: ['ADMIN'],
|
|
},
|
|
props: (route) => ({
|
|
user: store.state.auth.currentUser || {},
|
|
settings: store.state.utils.settings || {},
|
|
}),
|
|
},
|
|
{
|
|
path: '/settings',
|
|
name: 'settings',
|
|
component: () => lazyLoadView(import('@/src/router/views/settings.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({
|
|
user: store.state.auth.currentUser || {},
|
|
me: store.state.users.me || {},
|
|
}),
|
|
},
|
|
{
|
|
path: '/profile/:username',
|
|
name: 'username-profile',
|
|
component: () => lazyLoadView(import('@views/profile.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('users/fetchUser', { username: routeTo.params.username })
|
|
.then((user) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.user = user
|
|
// Continue to the route.
|
|
next()
|
|
})
|
|
.catch(() => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ user: route.meta.tmp.user }),
|
|
},
|
|
|
|
{
|
|
path: '/vehicles/create',
|
|
name: 'vehicle-create',
|
|
component: () => lazyLoadView(import('@views/createVehicle.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
},
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId',
|
|
name: 'vehicle-detail',
|
|
component: () => lazyLoadView(import('@views/vehicle.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
// Continue to the route.
|
|
next()
|
|
})
|
|
.catch(() => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle }),
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId/edit',
|
|
name: 'vehicle-edit',
|
|
component: () => lazyLoadView(import('@views/createVehicle.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
// Continue to the route.
|
|
next()
|
|
})
|
|
.catch(() => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle }),
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId/fillup',
|
|
name: 'vehicle-create-fillup',
|
|
component: () => lazyLoadView(import('@views/createFillup.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
// Continue to the route.
|
|
next()
|
|
})
|
|
.catch(() => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle }),
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId/fillup/:fillupId/edit',
|
|
name: 'vehicle-edit-fillup',
|
|
component: () => lazyLoadView(import('@views/createFillup.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
store
|
|
|
|
.dispatch('vehicles/fetchFillupById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
fillupId: routeTo.params.fillupId,
|
|
})
|
|
.then((fillup) => {
|
|
routeTo.meta.tmp.fillup = fillup
|
|
|
|
next()
|
|
})
|
|
})
|
|
.catch(() => {
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle, fillup: route.meta.tmp.fillup }),
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId/expense',
|
|
name: 'vehicle-create-expense',
|
|
component: () => lazyLoadView(import('@views/createExpense.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
// HACK: In order to share data between the `beforeResolve` hook
|
|
// and the `props` function, we must create an object for temporary
|
|
// data only used during route resolution.
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
// Try to fetch the user's information by their username
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
// Add the user to `meta.tmp`, so that it can
|
|
// be provided as a prop.
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
// Continue to the route.
|
|
next()
|
|
})
|
|
.catch(() => {
|
|
// If a user with the provided username could not be
|
|
// found, redirect to the 404 page.
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle }),
|
|
},
|
|
{
|
|
path: '/vehicles/:vehicleId/expense/:expenseId/edit',
|
|
name: 'vehicle-edit-expense',
|
|
component: () => lazyLoadView(import('@views/createExpense.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
|
|
tmp: {},
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store
|
|
|
|
.dispatch('vehicles/fetchVehicleById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
})
|
|
.then((vehicle) => {
|
|
routeTo.meta.tmp.vehicle = vehicle
|
|
store
|
|
|
|
.dispatch('vehicles/fetchExpenseById', {
|
|
vehicleId: routeTo.params.vehicleId,
|
|
expenseId: routeTo.params.expenseId,
|
|
})
|
|
.then((expense) => {
|
|
routeTo.meta.tmp.expense = expense
|
|
|
|
next()
|
|
})
|
|
})
|
|
.catch(() => {
|
|
next({ name: '404', params: { resource: 'User' } })
|
|
})
|
|
},
|
|
},
|
|
// Set the user from the route params, once it's set in the
|
|
// beforeResolve route guard.
|
|
props: (route) => ({ vehicle: route.meta.tmp.vehicle, expense: route.meta.tmp.expense }),
|
|
},
|
|
{
|
|
path: '/quickEntries',
|
|
name: 'quickEntries',
|
|
component: () => lazyLoadView(import('@views/quickEntries.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/import',
|
|
name: 'import',
|
|
component: () => lazyLoadView(import('@views/import.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/import/fuelly',
|
|
name: 'import-fuelly',
|
|
component: () => lazyLoadView(import('@views/import-fuelly.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/import/drivvo',
|
|
name: 'import-drivvo',
|
|
component: () => lazyLoadView(import('@views/import-drivvo.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/import/generic',
|
|
name: 'import-generic',
|
|
component: () => lazyLoadView(import('@views/import-generic.vue')),
|
|
meta: {
|
|
authRequired: true,
|
|
},
|
|
props: (route) => ({ user: store.state.auth.currentUser || {} }),
|
|
},
|
|
{
|
|
path: '/logout',
|
|
name: 'logout',
|
|
meta: {
|
|
authRequired: true,
|
|
beforeResolve(routeTo, routeFrom, next) {
|
|
store.dispatch('auth/logOut').then((data) => {
|
|
const authRequiredOnPreviousRoute = routeFrom.matched.some((route) => route.meta.authRequired)
|
|
// Navigate back to previous page, or home as a fallback
|
|
next(authRequiredOnPreviousRoute ? { name: 'login' } : { ...routeFrom })
|
|
})
|
|
},
|
|
},
|
|
},
|
|
{
|
|
path: '/404',
|
|
name: '404',
|
|
component: require('@views/_404.vue').default,
|
|
// Allows props to be passed to the 404 page through route
|
|
// params, such as `resource` to define what wasn't found.
|
|
props: true,
|
|
},
|
|
// Redirect any unmatched routes to the 404 page. This may
|
|
// require some server configuration to work in production:
|
|
// https://router.vuejs.org/en/essentials/history-mode.html#example-server-configurations
|
|
{
|
|
path: '*',
|
|
redirect: '404',
|
|
},
|
|
]
|
|
|
|
// Lazy-loads view components, but with better UX. A loading view
|
|
// will be used if the component takes a while to load, falling
|
|
// back to a timeout view in case the page fails to load. You can
|
|
// use this component to lazy-load a route with:
|
|
//
|
|
// component: () => lazyLoadView(import('@views/my-view'))
|
|
//
|
|
// NOTE: Components loaded with this strategy DO NOT have access
|
|
// to in-component guards, such as beforeRouteEnter,
|
|
// beforeRouteUpdate, and beforeRouteLeave. You must either use
|
|
// route-level guards instead or lazy-load the component directly:
|
|
//
|
|
// component: () => import('@views/my-view')
|
|
//
|
|
function lazyLoadView(AsyncView) {
|
|
const AsyncHandler = () => ({
|
|
component: AsyncView,
|
|
// A component to use while the component is loading.
|
|
loading: require('@views/_loading.vue').default,
|
|
// Delay before showing the loading component.
|
|
// Default: 200 (milliseconds).
|
|
delay: 400,
|
|
// A fallback component in case the timeout is exceeded
|
|
// when loading the component.
|
|
error: require('@views/_timeout.vue').default,
|
|
// Time before giving up trying to load the component.
|
|
// Default: Infinity (milliseconds).
|
|
timeout: 10000,
|
|
})
|
|
|
|
return Promise.resolve({
|
|
functional: true,
|
|
render(h, { data, children }) {
|
|
// Transparently pass any props or children
|
|
// to the view component.
|
|
return h(AsyncHandler, data, children)
|
|
},
|
|
})
|
|
}
|