Nuxt3 使用全域中介軟體 自動跳轉到登入頁面

Nuxt3 專案中的中介軟體會放在專案根目錄的 middleware 資料夾中，如果檔名後面(不包含副檔名)是 .global ，例如 auth.global.ts ，就會自動備註冊為全域中介軟體，會在每次路徑變更時自動執行。
這樣我們就可以在 auth.global.ts 中檢查是否有登入，假設尚未登入就跳轉到登入頁面：

    
export default defineNuxtRouteMiddleware((to, from) => {
    if (to.path === '/login') return

    const _token = useCookie('jwt'); // 假設確認有沒有登入的方式是 cookie 中有 jwt 這個值
    if (_token.value) return; // 有的話就不處理

    return navigateTo('/login'); // 跳轉到登入頁面
})

    

紀錄原始路徑

沒有登入時就跳轉到登入頁面，但是登入後該如何自動跳轉回原始網頁呢？
我們可以在跳轉到登入頁面時將原始要跳轉的路徑放到 query string 中：

    
export default defineNuxtRouteMiddleware((to, from) => {
    if (to.path === '/login') return

    const _token = useCookie('jwt'); // 假設確認有沒有登入的方式是 cookie 中有 jwt 這個值
    if (_token.value) return; // 有的話就不處理

    return navigateTo(`/login?redirect=${to.fullPath}`); // 跳轉到登入頁面，並記錄目標路徑
})

    

這樣連結就會類似於: http://localhost:3000/login?redirect=/home

在登入頁面登入成功後加上以下的程式碼，就會自動跳轉到原始的網址了：

    
    // 從 query string 取得 redirect 參數
    let redirectPath = useRoute().query.redirect as string | undefined;
    console.log(`redirectPath: ${redirectPath}`);
    if (!redirectPath) redirectPath = '/';

    await useRouter().push(redirectPath);
    

參考資料：
Nuxt3 - middleware
Nuxt3 - useRoute