refactor: move router config to router.js

src/components/Header.vue

@@ -25,7 +25,6 @@
 
 <script>
 import api from '../services/api'
-import { routes } from '../routes.js'
 
 export default {
   data() {
@@ -39,7 +38,7 @@ export default {
       return api.getUsername()
     },
     getDrawerMenuItems() {
-      return routes
+      return this.$router.options.routes
         .filter(r => r.meta && r.meta.drawerMenu)
         .filter(r => this.username ? r.meta.requiresAuth !== false : !r.meta.requiresAuth)
         .map((r => ({ title: r.meta.title, props: { 'prepend-icon': r.meta.icon, to: r.path }})))

src/main.js

@@ -1,55 +1,10 @@
 import { createApp } from 'vue'
 import './assets/main.css'
 import App from './App.vue'
-import api from './services/api';
-import { routes } from './routes.js'
-import { createRouter, createWebHistory } from 'vue-router'
+import router from './router.js'
 import { vuetify } from './plugins/vuetify.js'
 
 let app = createApp(App)
-let router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: import.meta.hot ? [] : routes,
-})
-
-if (import.meta.hot) {
-  let removeRoutes = []
-
-  for (let route of routes) {
-    removeRoutes.push(router.addRoute(route))
-  }
-
-  import.meta.hot.accept('./routes.js', ({ routes }) => {
-    for (let removeRoute of removeRoutes) removeRoute()
-    removeRoutes = []
-    for (let route of routes) {
-      removeRoutes.push(router.addRoute(route))
-    }
-    router.replace('')
-  })
-}
-
-
-/**
- * Method to check if the user is authenticated
- */
-const checkAuth = async () => {
-  if (api.getToken()) return true
-}
-
-/**
- * On each page change, check if it needs authentication.
- * If required, but the user is not authenticated (cookie not present), then redirect to 'sign-in'
- */
-router.beforeEach(async (to, from, next) => {
-  if(to.meta.requiresAuth) {
-      if(!(await checkAuth())) {
-        console.log("checkAuth")
-        return next({ name: 'sign-in' })
-      }
-  }
-  next()
-})
 
 app.use(router)
 app.use(vuetify)

src/routes.js → src/router.js

@@ -1,3 +1,5 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import api from './services/api';
 import Home from './views/Home.vue'
 import SignIn from './views/SignIn.vue'
 import UserDashboard from './views/UserDashboard.vue'
@@ -10,7 +12,7 @@ import Stats from './views/Stats.vue'
 import NotFound from './views/NotFound.vue'
 
 /** @type {import('vue-router').RouterOptions['routes']} */
-export let routes = [
+const routes = [
   { path: '/', name: 'home', component: Home, meta: { title: 'Home', icon: 'mdi-home', drawerMenu: true } },
   { path: '/sign-in', name: 'sign-in', component: SignIn, meta: { title: 'Sign in', icon: 'mdi-login', drawerMenu: true, requiresAuth: false } },
   { path: '/dashboard', name: 'dashboard', component: UserDashboard, meta: { title: 'Dashboard', requiresAuth: true } },
@@ -22,3 +24,31 @@ export let routes = [
   { path: '/stats', name: 'stats', component: Stats, meta: { title: 'Stats' }},
   { path: '/:path(.*)', component: NotFound },
 ]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes,
+})
+
+/**
+ * Method to check if the user is authenticated
+ */
+const checkAuth = async () => {
+  if (api.getToken()) return true
+}
+
+/**
+ * On each page change, check if it needs authentication.
+ * If required, but the user is not authenticated (cookie not present), then redirect to 'sign-in'
+ */
+router.beforeEach(async (to, from, next) => {
+  if(to.meta.requiresAuth) {
+      if(!(await checkAuth())) {
+        console.log("checkAuth")
+        return next({ name: 'sign-in' })
+      }
+  }
+  next()
+})
+
+export default router