Nuxt.js custom role middleware doesn't work when page refresh

Question

I have a simple application with some pages that need to be protected if the connected user is not an administrator.

I use the nuxt/auth package to handle the authentication:

auth: {
    strategies: {
        local: {
            scopeKey: 'roles',
            token: {
                property: 'access_token',
                type: 'Bearer',
                name: 'Authorization',
            },
            user: {
                property: 'user',
            },
            endpoints: {
                login: {url: '/api/auth/login', method: 'post'},
                // logout: { url: '/api/auth/logout', method: 'post' },
                user: {url: '/api/auth/me', method: 'get'}
            }
        },
    },
    redirect: {
        login: '/',
        logout: '/',
        callback: '/housing',
        home: '/home'
    },
    plugins: [
        '~/plugins/auth.js',
    ]
},

This works well but I have trouble achieving my middleware. So what I want is to redirect the users to the home page if they don't have the role ROLE_ADMIN

export default function ({app, $auth, $axios}) {
   if (!$auth.user.roles.includes('ROLE_ADMIN')) {
        console.log("unauthorized");
        app.router.push(app.localePath('home'));
    }
}

And I use the middleware on the page I want. It works perfectly when for example the user is logged and goes to the administration page without refreshing the page.

But if they go and refresh the page or use the direct URL, instantly after being redirected to the home page by my middleware, nuxt/auth redirect again my user to the "unauthorized" page.

Why this behavior?

maybe something to do with session cookies being invalidated on refresh? — mahatmanich, May 06 '21 at 19:57
But if the cookie is invalidate it should be redirected to login page, like when no user is connected no ? — Spialdor, May 06 '21 at 20:20
Yes, I finally used a custom process in my components instead of a guard for the moment — Spialdor, May 17 '21 at 09:39
On a side note... doesn't `scopeKey` have to occur in the root of the `auth: {}` object ? Hard to find explicit examples, however the [Nuxt Auth docs](https://auth.nuxtjs.org/api/options/#scopekey) mention it as a general property amongst others that are shown occurring in root of `auth:{}`. — Kalnode, Aug 03 '22 at 13:14

kissu · Answer 1 · 2021-05-10T14:15:19.217

Sorry for the bad answer last time. Here is a new one.

In the case of a hard refresh or moving to an URL from the search bar (same thing), you lose all your state and your app is loaded from scratch once again. At this point, you will have all of your middlewares executed again.

Here is a quote from this documentation page

The middleware will be executed in series in this order:

nuxt.config.js (in the order within the file)

Matched layouts

Matched pages

So, you'll have your auth (@nuxt/auth) middleware executed once again, then you will have your own custom one executed. Now, if you do not persist the info of the user (the one successfully logged in before the hard refresh), the auth module will have no clue of who you are and hence prompt you for a login once again.

So, nothing abnormal here so far.

Here is a link to an answer on how to persist data through a hard refresh: https://stackoverflow.com/a/66872372/8816585

That's not what I want to do... I already have this middleware but I created another one to allow only users with a specific role — Spialdor, May 07 '21 at 10:32

score 0 · Answer 2 · answered May 12 '22 at 15:32

The simple answer is: disable the redirect for auth/nuxt login and handle it on your own

    redirect: {
        login: false,
        logout: '/',
        callback: '/housing',
        home: '/home'
    },

If you don't disable it, it always is going to redirect the page to home after login

Nuxt.js custom role middleware doesn't work when page refresh

2 Answers2