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?

Answer 1

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

Answer 2

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