stan Comments - Answer Overflow

stan

•Created by stan on 3/13/2025 in #❓・help

using dependencies in plugins

@kapa.ai how should routing work from inside plugin.

export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter();

  const api = $fetch.create({
    baseURL: "http://localhost:3000/api/v1/",
    onRequest({ request, options, error }) {
      const useAuth = useAuthService();

      if (useAuth.token()) {
        options.headers = {
          ...options.headers,
          "x-access-token": useAuth.token(),
        };
      }
    },
    async onResponseError({ request, response }) {
      const responseBody = await response._data;

      if (
        response.status == 401
      ) {
        await nuxtApp.runWithContext(() =>
          navigateTo("/auth/login?redirect_from_app=true"),
        );
        router.push("/auth/login?redirect_from_app=true");
        return;
      }
    },
    credentials: "include",
  });

  return {
    provide: {
      api,
    },
  };
});

export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter();

  const api = $fetch.create({
    baseURL: "http://localhost:3000/api/v1/",
    onRequest({ request, options, error }) {
      const useAuth = useAuthService();

      if (useAuth.token()) {
        options.headers = {
          ...options.headers,
          "x-access-token": useAuth.token(),
        };
      }
    },
    async onResponseError({ request, response }) {
      const responseBody = await response._data;

      if (
        response.status == 401
      ) {
        await nuxtApp.runWithContext(() =>
          navigateTo("/auth/login?redirect_from_app=true"),
        );
        router.push("/auth/login?redirect_from_app=true");
        return;
      }
    },
    credentials: "include",
  });

  return {
    provide: {
      api,
    },
  };
});

why doesnt the nuxtApp.runWithContext run correctly when the app starts.

23 replies

NNuxt

•Created by stan on 3/13/2025 in #❓・help

using dependencies in plugins

@kapa.ai I have this oni-init plugin that i want to run on application creation (when it starts)

import { useAuthService } from "#imports";

export default defineNuxtPlugin((nuxtApp) => {
  const useAuth = useAuthService();

  nuxtApp
    .$api("app/auth/refresh", {
      method: "POST",
      credentials: "include",
    })
    .then(async (data) => {
      useAuth.setAccessToken(data.accessToken);
    });
});

import { useAuthService } from "#imports";

export default defineNuxtPlugin((nuxtApp) => {
  const useAuth = useAuthService();

  nuxtApp
    .$api("app/auth/refresh", {
      method: "POST",
      credentials: "include",
    })
    .then(async (data) => {
      useAuth.setAccessToken(data.accessToken);
    });
});

and i have profile.vue that has this getProfile request call

const {
  data,
  status,
  execute: getProfile,
  error: profileError,
} = await useAPI("app/auth/profile", {
  immediate: false,
  credentials: "include",
});

onMounted(async () => {
  await getProfile();
});

const {
  data,
  status,
  execute: getProfile,
  error: profileError,
} = await useAPI("app/auth/profile", {
  immediate: false,
  credentials: "include",
});

onMounted(async () => {
  await getProfile();
});

now the problem is even tho, getProfile needs an access token that comes from the refresh call it ends up running at the same time with out any access token from the refresh

23 replies

NNuxt

•Created by stan on 3/13/2025 in #❓・help

using dependencies in plugins

@kapa.ai Thanks That works correctly. I have another question . In this code

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    baseURL: "https://api.voucher.et/api/v1/",
    onRequest({ request, options, error }) {},
    async onResponseError({ request, response }) {
      try {
        const responseBody = await response.text();
        const errorDetails = {
          status: response.status,
          statusText: response.statusText,
          body: JSON.parse(responseBody),
          message: JSON.parse(responseBody)?.message || "Unknown error",
          timestamp: new Date().toISOString(),
        };

        nuxtApp.vueApp.config.errorHandler(new Error(errorDetails.message));
      } catch (parseError) {
        const errorDetails = {
          status: response.status,
          statusText: response.statusText,
          message: "API Error",
          timestamp: new Date().toISOString(),
        };

        nuxtApp.vueApp.config.errorHandler(new Error(errorDetails.message));
      }
    },
    credentials: "include",
  });

  return {
    provide: {
      api,
    },
  };
});

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    baseURL: "https://api.voucher.et/api/v1/",
    onRequest({ request, options, error }) {},
    async onResponseError({ request, response }) {
      try {
        const responseBody = await response.text();
        const errorDetails = {
          status: response.status,
          statusText: response.statusText,
          body: JSON.parse(responseBody),
          message: JSON.parse(responseBody)?.message || "Unknown error",
          timestamp: new Date().toISOString(),
        };

        nuxtApp.vueApp.config.errorHandler(new Error(errorDetails.message));
      } catch (parseError) {
        const errorDetails = {
          status: response.status,
          statusText: response.statusText,
          message: "API Error",
          timestamp: new Date().toISOString(),
        };

        nuxtApp.vueApp.config.errorHandler(new Error(errorDetails.message));
      }
    },
    credentials: "include",
  });

  return {
    provide: {
      api,
    },
  };
});

why am i getting response.json is already read error

23 replies

Gaming

Programming