Merge pull request #135 from manchenkoff/109-enhancement-redirects-stack-up

fix: trim trailing slash on redirects

Author: manchenkoff

src/runtime/composables/useSanctumAuth.ts

@@ -4,6 +4,7 @@ import { useSanctumUser } from './useSanctumUser';
 import { navigateTo, useNuxtApp, useRoute } from '#app';
 import { useSanctumConfig } from './useSanctumConfig';
 import { useSanctumAppConfig } from './useSanctumAppConfig';
+import { trimTrailingSlash } from '../utils/formatter';
 
 export interface SanctumAuth<T> {
     user: Ref<T | null>;
@@ -45,6 +46,7 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
      */
     async function login(credentials: Record<string, any>) {
         const currentRoute = useRoute();
+        const currentPath = trimTrailingSlash(currentRoute.path);
 
         if (isAuthenticated.value === true) {
             if (options.redirectIfAuthenticated === false) {
@@ -53,13 +55,13 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
 
             if (
                 options.redirect.onLogin === false ||
-                options.redirect.onLogin === currentRoute.path
+                options.redirect.onLogin === currentPath
             ) {
                 return;
             }
 
-            await nuxtApp.runWithContext(() =>
-                navigateTo(options.redirect.onLogin as string)
+            await nuxtApp.runWithContext(
+                async () => await navigateTo(options.redirect.onLogin as string)
             );
         }
 
@@ -77,9 +79,9 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
         if (options.redirect.keepRequestedRoute) {
             const requestedRoute = currentRoute.query.redirect;
 
-            if (requestedRoute && requestedRoute !== currentRoute.path) {
-                await nuxtApp.runWithContext(() =>
-                    navigateTo(requestedRoute as string)
+            if (requestedRoute && requestedRoute !== currentPath) {
+                await nuxtApp.runWithContext(
+                    async () => await navigateTo(requestedRoute as string)
                 );
 
                 return;
@@ -93,8 +95,8 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
             return;
         }
 
-        await nuxtApp.runWithContext(() =>
-            navigateTo(options.redirect.onLogin as string)
+        await nuxtApp.runWithContext(
+            async () => await navigateTo(options.redirect.onLogin as string)
         );
     }
 
@@ -107,6 +109,7 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
         }
 
         const currentRoute = useRoute();
+        const currentPath = trimTrailingSlash(currentRoute.path);
 
         await client(options.endpoints.logout, { method: 'post' });
 
@@ -118,13 +121,13 @@ export const useSanctumAuth = <T>(): SanctumAuth<T> => {
 
         if (
             options.redirect.onLogout === false ||
-            currentRoute.path === options.redirect.onLogout
+            currentPath === options.redirect.onLogout
         ) {
             return;
         }
 
-        await nuxtApp.runWithContext(() =>
-            navigateTo(options.redirect.onLogout as string)
+        await nuxtApp.runWithContext(
+            async () => await navigateTo(options.redirect.onLogout as string)
         );
     }
 

src/runtime/httpFactory.ts

@@ -107,8 +107,11 @@ export function createHttpClient(logger: ConsolaInstance): $Fetch {
                     options.redirectIfUnauthenticated &&
                     options.redirect.onAuthOnly
                 ) {
-                    await nuxtApp.runWithContext(() =>
-                        navigateTo(options.redirect.onAuthOnly as string)
+                    await nuxtApp.runWithContext(
+                        async () =>
+                            await navigateTo(
+                                options.redirect.onAuthOnly as string
+                            )
                     );
                 }
             }

src/runtime/interceptors/cookie/response.ts

@@ -48,6 +48,8 @@ export default async function handleResponseHeaders(
 
     // follow redirects on client
     if (ctx.response.redirected) {
-        await app.runWithContext(() => navigateTo(ctx.response!.url));
+        await app.runWithContext(
+            async () => await navigateTo(ctx.response!.url)
+        );
     }
 }

src/runtime/middleware/sanctum.auth.ts

@@ -2,6 +2,7 @@ import { defineNuxtRouteMiddleware, navigateTo, createError } from '#app';
 import type { RouteLocationRaw } from 'vue-router';
 import { useSanctumConfig } from '../composables/useSanctumConfig';
 import { useSanctumAuth } from '../composables/useSanctumAuth';
+import { trimTrailingSlash } from '../utils/formatter';
 
 export default defineNuxtRouteMiddleware((to) => {
     const options = useSanctumConfig();
@@ -20,7 +21,7 @@ export default defineNuxtRouteMiddleware((to) => {
     const redirect: RouteLocationRaw = { path: endpoint };
 
     if (options.redirect.keepRequestedRoute) {
-        redirect.query = { redirect: to.fullPath };
+        redirect.query = { redirect: trimTrailingSlash(to.fullPath) };
     }
 
     return navigateTo(redirect, { replace: true });

src/runtime/middleware/sanctum.global.ts

@@ -2,6 +2,7 @@ import { defineNuxtRouteMiddleware, navigateTo } from '#app';
 import type { RouteLocationRaw } from 'vue-router';
 import { useSanctumConfig } from '../composables/useSanctumConfig';
 import { useSanctumAuth } from '../composables/useSanctumAuth';
+import { trimTrailingSlash } from '../utils/formatter';
 
 export default defineNuxtRouteMiddleware((to) => {
     const options = useSanctumConfig();
@@ -36,7 +37,8 @@ export default defineNuxtRouteMiddleware((to) => {
     }
 
     const isPageForGuestsOnly =
-        to.path === loginPage || to.meta.sanctum?.guestOnly === true;
+        trimTrailingSlash(to.path) === loginPage ||
+        to.meta.sanctum?.guestOnly === true;
 
     if (isAuthenticated.value === true) {
         if (isPageForGuestsOnly) {
@@ -53,7 +55,7 @@ export default defineNuxtRouteMiddleware((to) => {
     const redirect: RouteLocationRaw = { path: loginPage };
 
     if (options.redirect.keepRequestedRoute) {
-        redirect.query = { redirect: to.fullPath };
+        redirect.query = { redirect: trimTrailingSlash(to.fullPath) };
     }
 
     return navigateTo(redirect, { replace: true });

src/runtime/utils/formatter.ts

@@ -0,0 +1,3 @@
+export function trimTrailingSlash(path: string): string {
+    return path.replace(/\/$/, '');
+}