web-dev-qa-db-ja.com

* Nuxt JS Auth *ログイン成功後、loginWithでテンプレートセクションにauth.loggedInはtrueですが、ミドルウェアファイルはfalseですか？

NuxtJSの学習を始めたばかりで、Nuxtの認証モジュールによる認証を実装したいと思っています。理由はわかりませんが、loginWithを使用したログインが機能しているようです。vueファイルでは、ログに記録されたユーザーに関するデータを取得でき、loggedIn変数にはtrueの値があります。しかし、認証モジュールからミドルウェアを設定すると、 、ログインしている場合でも、サーバーは常にログインエンドポイントにリダイレクトしています。ミドルウェアファイルを作成できることがわかりましたが、loggedInの値が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')
  }
}

言及する価値があることは、それはドッカーで実行されているということです。多分それは問題です。

[〜＃〜] update [〜＃〜] nuxtモードをSSRからSPAに変更し、すべてがnuxt authモジュールから機能するようになりました。

しかし、私はそれがSSRで動作するようにしたいので、誰かが解決策を持っている場合は、共有してください。

vue.jsauthenticationnuxt.js
2
Krystian K

これで、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'],
  }
}
1
Krystian K