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

Question

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

index.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上运行。也许是个问题。

UPDATE我将nuxt模式从SSR更改为SPA，现在一切都可以从nuxt身份验证模块正常工作。

但是我想在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'],
  }
}