Static GitHub Issues

[454] Middleware Ajax Request doesn't send up cookies?

prev: nuxtServerInit or fetch behaviour with req.vars
next: TypeError: Cannot read property 'req' of undefined when "npm run generate" with asyncData

Hello everyone! I'm absolutely loving using nuxtjs for my vue app. It's been awesome so far. Thanks for the hard work!

I seem to have run into a bug or maybe I'm misunderstanding how the middlewares should work. The documentation indicates that I can return a promise in a middleware.

Here's what my middleware looks like. I'm using secure cookies in my app which are not accessible via JavaScript, so, the only way to check if a user is authenticated is by hitting the server. This midleware will check the authentication using my vuex method getSignedInUser.

// Middleware
export default function({ store, redirect }) {
    // If the user is not authenticated
    console.log('is authenticated?');
    if (!store.getters.isAuthenticated) {
        if (!store.getters.hasCheckedForAuthentication) {
            return new Promise((resolve, reject) => {
                store
                    .dispatch('getSignedInUser')
                    .then(() => resolve())
                    .catch(() => redirect('/admin/login'));
            });
        } else
            return redirect('/admin/login');
    }
}

(yeah, I know I probably don't have to wrap my promise in another promise–was trying to debug)

The ajax request is super simple. I use axios with withCredentials: true.

// Get Signed in User
function getSignedInUser() {
    console.log('Send up ajax request');
    return axios.get('/api/v1/admin/user');
}

In the end, there's no ajax request in Chrome: image

However, I know it's hitting the server, because the logs are coming through. image

When I run the exact same vuex action from a vue method, it works.

isSignedIn() {
    this.$store.dispatch('getSignedInUser');
 }

image

So am I missing something? How can I get nuxt.js to send up the actual ajax request with the cookie during the middleware? Or should I change my strategy for authentication? I'd like to continue to use secure cookies (to protect against possible XSS attacks).

Thanks!

UPDATE: I just noticed that this issue ONLY occurs when I directly load the page with the middleware. For example, I run this middleware on the /admin page. If I directly go to localhost:3000/admin, the issue I spoke of above occurs. However, if I add a nuxt-link to my home page, linking to the /admin page and go to the page by clicking on the link, this issue doesn't occur.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c401">#c401</a>)</em></sub></div>