nuxt/auth middleware: ['auth'] when open

Question

I have a problem setting permissions when open a project

i have use nuxt\auth for authorization and it works great, gets the token, exits, etc.

I have the following settings in nuxt.config.js

export default {
loading: '~/components/loading.vue',
router: {
    extendRoutes(routes) {
        routes.push({
            path: '/',
            component: '~/pages/dashboard/sales/index.vue'
        });
    },
    middleware: ['auth']
},
auth: {
    redirect: {
        login: '/auth/login',
        home: '/',
        logout: '/auth/login',
        callback: '/'
    },
    strategies: {
        local: {
            //...... some token settings
            endpoints: {
                login: { url: 'http://api.local:5002/api/v2/Account/login', method: 'post' },
                refresh: { url: 'http://api.local:5002/api/v2/Account/refreshToken', method: 'post' },
                logout: false,
                user: { url: 'http://api.local:5002/api/v2/User/settings', method: 'get' }
            }
        }
    }
},
modules: [
    'bootstrap-vue/nuxt',
    'nuxt-i18n',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
],
// .... order settings
}

according to the settings, all my pages require authorization, routing works like this, when I follow some link, if I am not authorized, I am redirected to the authorization page

however, if I open the project in a browser, I go to the page without authorization

  http://local:3000/

and according to settings - page (" \ ") is http://local:3000/pages/dashboard/sales/index.vue

which should be closed to guests.

I think this is happening because nuxt's auth isn't doing the transition yet, so the auth check isn't triggered.

i try add middleware: 'auth' in sales/index.vue but that not help, page open for guest when start

export default {
    name: 'Sales',
    head() {
        return {
            title: `Sales Dashboard`
        };
    },
    middleware: 'auth',
    data() {
        return {
            title: 'Welcome !'
        }
    }

};

I also tried to add a plugin where there will be an authorization check, but the redirect does not work

export default function ({ $auth, redirect }) {
    if (!$auth.loggedIn) {
        console.log('test');
        return redirect('/auth/login');
    }
}

I see the text in the console, however the redirect is not happening

how to correctly, when broweser open site -> check whether an authorized user has entered the site, or a guest, and if the guest then immediately redirect to the authorization page (to http://local:3000/auth/login) ?

nuxt/auth middleware: ['auth'] when open

0 Answers