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

Question

我刚开始学习 NuxtJS，我想通过 auth 模块为 Nuxt 实现身份验证。
我不知道为什么，但是使用 loginWith 登录似乎可以正常工作，在 vue 文件上我可以获取有关已登录用户的数据，并且 loggedIn 变量具有真实值。但是我注意到当我从 auth 模块设置中间件时，即使我已经登录，服务器总是重定向到登录端点。我看到我可以制作我的中间件文件，但loginIn 的值为false，所以我无法正确重定向。

索引.vue

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

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


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

};
</script>

我的登录组件:

<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

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

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')
  }
}

值得一提的是，它在 docker 上运行。也许这是个问题。

更新
我将 nuxt 模式从 SSR 更改为 SPA，现在一切都可以从 nuxt auth 模块运行。

但我想在 SSR 上工作，所以如果有人有解决方案，请分享。

Answer 1

好的，我找不到比将 nuxt 的模式更改为 SPA 更好的解决方案。在 SPA 中，一切正常，应该如何。这是我用于 auth 模块的 nuxt.conf.js 片段。

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'],
  }
}