Fix currentRoute

front/src/components/audio/PlayButton.vue

@@ -193,7 +193,7 @@ export default {
       return null
     },
     onTrackPage () {
-      return this.$router.currentRoute.name === 'library.tracks.detail'
+      return this.$router.currentRoute.value.name === 'library.tracks.detail'
     }
   },
   watch: {

front/src/components/library/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <main
-    :key="$router.currentRoute.name"
+    :key="$router.currentRoute.value.name"
     v-title="labels.title"
   >
     <section class="ui vertical stripe segment">

front/src/components/library/Library.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main pusher page-library">
-    <router-view :key="$router.currentRoute.fullPath" />
+    <router-view :key="$router.currentRoute.value.fullPath" />
   </div>
 </template>
 

front/src/init/axios.ts

@@ -29,8 +29,8 @@ export const install: InitModule = ({ app, store, router }) => {
     error.backendErrors = []
     if (store.state.auth.authenticated && !store.state.auth.oauth.accessToken && error.response.status === 401) {
       store.commit('auth/authenticated', false)
-      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.fullPath)
-      await router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.value.fullPath)
+      await router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
     }
 
     if (error.response.status === 404) {

front/src/types.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import type { Store } from 'vuex'
-import type VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 
 declare global {
   interface Window {
@@ -12,7 +12,7 @@ declare global {
 // App structure stuff
 export interface InitModuleContext {
   app: App
-  router: VueRouter
+  router: Router
   store: Store<any>
 }
 

front/src/utils/index.ts

@@ -1,6 +1,6 @@
 import { startCase } from 'lodash-es'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { APIErrorResponse } from '~/types'
 
 export function setUpdate (obj: object, statuses: { [key: string]: unknown }, value: unknown) {
@@ -51,9 +51,10 @@ export function setCsrf (xhr: XMLHttpRequest) {
   }
 }
 
-export async function checkRedirectToLogin (store: Store<any>, router: VueRouter) {
+// TODO (wvffle): Use navigation guards
+export async function checkRedirectToLogin (store: Store<any>, router: Router) {
   if (!store.state.auth.authenticated) {
-    return router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+    return router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
   }
 }