Kepmon Posts - Answer Overflow

Kepmon

Explore posts from servers

•Created by Kepmon on 3/26/2024 in #❓・help

How to check on a client side that a user was redirected from middleware?

I'm very new to Nuxt and this whole server-side part of it got me a bit confused. I have protected routes in my app and I want to display a popup when a user tries to go to such a route, without having permission to do so. Obviously, the only way a user would be able to try that is by typing in the address bar. So I have a piece of middleware that runs before each route changing and checks whether a user can go there or not. If not, a user is being redirected to an appropriate route. And now, I want to display a popup that says something like "Only authenticated users can reach this page" since - without it - a user might get confused why he'd stay on the same page even though having tried to go to another one. As for now, I have this piece of code:

// middleware/navigate.ts
if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo('/')
  }

// middleware/navigate.ts
if (to.path === '/dashboard' && userResponse == null) {
    return navigateTo('/')
  }

I thought I could first run navigateTo, then show popup, and then return at the end (I can't do it the other way around because then the popup wouldn't really show). But it seems like this whole navigateTo thing doesn't work at all without the return keyword before it (not sure why but ok). So... what I believe I want to do is to run something like middleware but AFTER going back to / and I'm not sure how do I do that. I don't think I can check from wich path a user was redirected (to this / path) on a client side. Same for the get request running from the page. I don't think I can use middleware for it since apparently the navigateTo function needs to run at the end. I don't think I can return a custom message from middleware and read it on a client side. I don't think I can use abortNavigation because it stays in the protected route and throws the 404 error. So... it seems that I can't do various things but is there something what I can do? Or maybe I'm wrong on something I wrote above and there's is a simple solution of my problem and I simply can't see it?

7 replies

NNuxt

•Created by Kepmon on 3/8/2024 in #❓・help

Error: The requested module '/_nuxt/stores/user.ts' does not provide an export named 'useUserStore'

So, I tried to add Pinia to my Nuxt 3 app, by doing: * installing Pinia, using: npm install pinia @pinia/nuxt * adding it to the nuxt config * creating the stores directory in the root of the projects and placing the user.ts file in it Code in user.ts:

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const userID = ref<null | string>(null)

  return {
    userID
  }
})

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const userID = ref<null | string>(null)

  return {
    userID
  }
})

Code in the component file:

<script setup lang="ts">
const userStore = useUserStore() // it's my understanding that I don't need to import the user store? I tried though, but it still wouldn't work.

console.log(userStore);

// ...
</script>

<script setup lang="ts">
const userStore = useUserStore() // it's my understanding that I don't need to import the user store? I tried though, but it still wouldn't work.

console.log(userStore);

// ...
</script>

And now, I get the error, as in the title. What's interesting, console.log seems to log the correct thing on a server and since this component is actually a page, it doesn't run on a client at all, when the page first loads. So, why I am getting this error? If it helps, this is my nuxt config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@pinia/nuxt',
    [
      '@vee-validate/nuxt',
      {
        autoImports: true
      }
    ]
  ],
  css: ['./assets/css/index.css'],
  pinia: {
    storesDirs: ['./stores/**'],
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@pinia/nuxt',
    [
      '@vee-validate/nuxt',
      {
        autoImports: true
      }
    ]
  ],
  css: ['./assets/css/index.css'],
  pinia: {
    storesDirs: ['./stores/**'],
  },
})

I'm sorry if this is a stupid question but my experience with Nuxt is like 2 days long and I'm learning it by just doing stuff and seeing what happens 🙈 I obviously read the docs here: https://pinia.vuejs.org/ssr/nuxt.html but it doesn't seem to be very helpful for me.

1 replies

KPCKevin Powell - Community

•Created by Kepmon on 9/30/2023 in #front-end

Astro - how to pass data from the server- to the client-side JavaScript

2 replies

KPCKevin Powell - Community

•Created by Kepmon on 9/16/2023 in #ui-ux

NVDA doesn't see buttons inside a popup

4 replies

KPCKevin Powell - Community

•Created by Kepmon on 9/7/2023 in #front-end

How to embed a rich-text editor on a website?

24 replies

Gaming

Programming