N
Nuxt•3w ago
Neamix

Middleware doesn't print log

Here's a grammatically corrected version of your text: Hello everyone, I am encountering a strange error in my middleware I created a middleware that redirects the user to the registration page if the authentication token does not exist or is invalid everything works fine on the Windows environment, and the server (Ubuntu environment) seems fine when I first log in allowing me to access the dashboard without any issue. However, when I refresh the page, I get redirected to the registration page, even though the token exists and is valid and After further investigation I found that the issue is in the last line of the code. I tried to print the error, but nothing is printed, even after I disabled the redirect. Interestingly, after disabling the redirect, the dashboard was able to use the token to identify the user. 
import { useCookie } from "nuxt/app";
import { useAuthenticationStore } from "../stores/Authentication/authentication";
import { useRouter } from "vue-router";

export default defineNuxtRouteMiddleware(async (to, from) => {
    let layout = to.meta.layout;
    const route = useRouter()

    // In case the layout not dashboard then this not in consirn 
    if (layout != 'dashboard') return true;

    // Check if this is the dashboard but the user doesnt have token
    if (layout == 'dashboard' && !useCookie('__Secure_TK').value?.length) navigateTo('/register');

    // Get user data from the token
    let authenticationStore = useAuthenticationStore();    

    try {
        let {data} = await authenticationStore.me();
        if (data.is_active) authenticationStore.signInUser(data)
        else return navigateTo('/register');
    } catch ($error) {
        console.log($error);
        // return navigateTo('/register') -> problem line
    }

   
})
import { useCookie } from "nuxt/app";
import { useAuthenticationStore } from "../stores/Authentication/authentication";
import { useRouter } from "vue-router";

export default defineNuxtRouteMiddleware(async (to, from) => {
    let layout = to.meta.layout;
    const route = useRouter()

    // In case the layout not dashboard then this not in consirn 
    if (layout != 'dashboard') return true;

    // Check if this is the dashboard but the user doesnt have token
    if (layout == 'dashboard' && !useCookie('__Secure_TK').value?.length) navigateTo('/register');

    // Get user data from the token
    let authenticationStore = useAuthenticationStore();    

    try {
        let {data} = await authenticationStore.me();
        if (data.is_active) authenticationStore.signInUser(data)
        else return navigateTo('/register');
    } catch ($error) {
        console.log($error);
        // return navigateTo('/register') -> problem line
    }

   
})
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Neamix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your middleware issue in Nuxt 3. However, it's important to note that the specific problem you're describing isn't directly addressed in the given sources. Nevertheless, I can provide some general guidance based on Nuxt 3 middleware behavior. 1. Middleware Execution: Nuxt middleware runs on both the server and client side. This means that when you refresh the page, the middleware is executed on the server first. If you're not seeing console logs, it might be because they're not visible in the server-side execution. 2. Logging: Instead of using console.log(), you might want to try using Nuxt's built-in logger or a server-side logging mechanism. This could help you see the logs during server-side execution. 3. Navigation in Middleware: The navigateTo() function in middleware should be used carefully. According to the Nuxt documentation on middleware, you should return the result of navigateTo() instead of just calling it: 
   return navigateTo('/register');
   
   return navigateTo('/register');
4. Asynchronous Operations: Your middleware contains asynchronous operations. Make sure you're properly handling these, especially when it comes to navigation. 5. Token Validation: The issue with being redirected to the registration page after refresh, despite having a valid token, might be related to how the token is being validated or stored. Ensure that your token is properly persisted and accessible after a page refresh. 6. Error Handling: In your catch block, you're trying to log the error. If this isn't working, you might want to try a different approach to error handling and logging. Given the complexity of your issue and the limited information in the provided knowledge sources, I would recommend the following steps: 1. Use Nuxt's debugging tools as described in the Nuxt debugging guide to get more insight into what's happening during the middleware execution. 2. Consider using the defineNuxtRouteMiddleware with proper typing for better error catching and IDE support. 3. Ensure that your middleware is set up correctly in your Nuxt configuration and that it's being applied to the correct routes. If the problem persists after trying these steps, you might want to create a minimal reproduction of the issue and seek help from the Nuxt community or official support channels, as the specific behavior you're experiencing isn't covered in the provided knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@283967381250768901> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?