*Nuxt JS Auth* 为什么在模板部分中使用 loginWith 登录成功后 auth.loggedIn 为真，但在中间件文件中为假？

Question

I just started learning NuxtJS and I want to implement authentication by auth module for Nuxt. I don't know why, but login with loginWith seems working, on vue files I can get data about logged user and loggedIn variable has true value. But I noticed when I set middleware from auth module, even if I'm logged in, server is redirecting always to login endpoint. I saw that I can make my middleware file, but there loggedIn has value false, so I can't be redirected correctly.

index.vue

<template>
    <div id="main-page">
        <panel />
    </div>
</template>

<script>
import panel from "~/components/Panel.vue"


export default {
    middleware: ['authenticated'],
    'components': {
        panel
    },

};
</script>

My login component:

<template>
    <div id="form-wrapper">
        <b-form-group 
            class="ml-3 mr-5"
            label="Username"
            label-for="id-username"
            :invalid-feedback="invalidFeedback"
            :state='state'
        >
            <b-form-input id="id-username" v-model="username" type="text" placeholder="elo"></b-form-input>        
        </b-form-group>
        <b-form-group 
            class="ml-3 mr-5"
            label="Password"
            label-for="id-password"
            :invalid-feedback="invalidFeedbackPass"
            :state='statePass'
        >
            <b-form-input id="id-password" v-model="password" type="password"></b-form-input>        
        </b-form-group>
        <b-button v-b-modal.login-modal class="ml-3 mr-5" variant="outline-success">Login</b-button>
<div v-if="$auth.loggedIn">{{ $auth.loggedIn }}</div> // here is true after login

        <b-modal ref="login-modal" id="login-modal" hide-footer hide-header>
            <p>Login: {{ username }} Hasło: {{ password }}</p>
            <b-button @click="loginUser({username, password})">Send</b-button>
        </b-modal>
    </div>    
</template>

<script>
import "bootstrap-vue"
import axios from "axios"

export default {
    name: "loginForm",
    data() {
        return{
            username: '',
            password: '',
        }
    },
    props: {

    },
    methods: {
        async loginUser(loginInfo){
            try {
                await this.$auth.loginWith('local', {
                    data: loginInfo
                });
            } catch (e) {
                this.$router.push('/');
            }
        }

    },
...
</script>

nuxt.config.js for auth

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' },
          logout: { url: '/auth/token/logout/', method: 'post' },
          user: { url: '/auth/users/me/', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      }
    },

    redirect: {
      login: "/",
      logout: "/",
      home: "/home"
    },

  },

autenticated.js in middleware

export default function ({ store, redirect }) {
  console.log(store.state.auth.loggedIn); // here returns false, even after success login
  if (store.state.auth.loggedIn) {
    return redirect('/home')
  }
}

Worth to mention is that, it's running on docker. Maybe that's a problem.

UPDATE I changed nuxt mode from SSR to SPA and now everything works from nuxt auth module.

But I want to that works on SSR, so if someone have solution, please share.

Answer 1

Ok I couldn't find better solution for this, than changing nuxt's mode to SPA. In SPA everything works, how it should be. Here my nuxt.conf.js fragment for auth module.

export default{
  mode: 'spa',

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  axios: {
    baseURL: 'http://127.0.0.1:8000/api',
    browserBaseURL: 'http://127.0.0.1:8000/api'
  },

  auth: {

    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/token/login/', method: 'post', propertyName: 'auth_token' },
          logout: { url: '/auth/token/logout/', method: 'post' },
          user: { url: '/auth/users/me/', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Token',
        tokenName: 'Authorization'
      }
    },
    rewriteRedirects: false,

    redirect: {
      login: "/login",
      logout: "/login",
      home: "/",
    },
  },

  router : {
    middleware: ['auth'],
  }
}

Answer 2

my nuxt.config.js also:

auth: {
 strategies: {
  local: {
    endpoints: {
      login: { url: '/api/login', method: 'post' },
      logout: false,
      user: false,
    },
    tokenRequired: true,
  },
},
rewriteRedirects: false,

 redirect: {
  login: '/login',
  logout: '/login',
  home: '/dashboard',
},}