programing

Nuxt 인증 모듈이 로그인한 사용자를 스토어 상태로 설정하지 않음

goodcopy 2022. 7. 29. 23:18
반응형

Nuxt 인증 모듈이 로그인한 사용자를 스토어 상태로 설정하지 않음

저는 현재 Nuxt Auth Module의 도움을 받아 인증 기능을 연구하고 있습니다.

프런트 엔드에서는 Nuxt Js를 실행하고 백엔드에서는 Laravel 5.7을 실행하고 있습니다.

nuxt.config.config.config.config.config.config.config.config

  auth: {
  strategies: {
      local: {
          endpoints: {
              login: { url: 'login', method: 'post', propertyName: 'access_token' },
              logout: { url: 'logout', method: 'post' },
              user: { url: 'user', method: 'get', propertyName: 'user' },
          }
      },
       tokenRequired: true,
       tokenType: 'bearer',
  }

},

my index.vue에 로그인 방법이 있는 폼이 있습니다.

        <template>
    <div>
      <div>
        <b-container>
          <b-row no-gutters>
            <b-col col lg="12">

            </b-col>
          </b-row>
          <b-row no-gutters>
            <b-col col lg="12">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" label-position="top">
                  <el-form-item label="Email" prop="email">
                    <el-input v-model="ruleForm.email" ></el-input>
                  </el-form-item>
                  <el-form-item label="Password" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="login">Inloggen</el-button>
                    <!--<el-button @click="resetForm('ruleForm2')">Reset</el-button>-->
                  </el-form-item>
                </el-form>
            </b-col>
          </b-row>
        </b-container>
      </div>
    </div>
    </template>

    <script>
        export default {
            layout: 'login',
            data() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('Vul een wachtwoord in'));
                    } else {
                        callback();
                    }
                };
                return {
                    ruleForm: {
                        email: '',
                        password: '',
                    },
                    rules: {
                        password: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        email: [
                            { required: true, message: 'Vul een email in', trigger: 'blur' },
                            { type: 'email', message: 'Vul een correct email adres in', trigger: ['blur'] }
                        ]
                    }
                };
            },
            methods: {

                async login() {
                    try {
                        await this.$auth.loginWith('local', {
                            data: {
                                username: this.ruleForm.email,
                                password: this.ruleForm.password
                            }
                        }).then(() => {
                                this.$router.push({ name: 'dashboard'})
                            })
                    } catch (e) {
                        console.log(e)
                    }
                },
            }
        }
    </script>

로그인을 시도하면 비동기 함수 '로그인'이 호출됩니다.사용자 이름과 비밀번호에 대응하는 사용자가 반환됩니다.유일한 문제는 vuex 상태일 때 auth.logged라는 것입니다.in은 false로 유지되고 auth.user는 정의되지 않은 상태로 유지됩니다.

Nuxt Auth가 자동으로 상태를 갱신하는 줄 알았는데, 아니면 뭔가 누락된 건가요?

어떤 도움이라도 주시면 대단히 감사하겠습니다.d

나는 마침내 해결책을 찾았다.사용자 끝점의 속성 이름을 false로 설정해야 했습니다.

구버전

      endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'access_token' },
          logout: { url: 'logout', method: 'post' },
          user: { url: 'user', method: 'get', propertyName: 'user' },
      }

새 버전

      endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'access_token' },
          logout: { url: 'logout', method: 'post' },
          user: { url: 'user', method: 'get', propertyName: false },
      }

이제 사용자가 해당 상태로 로드됩니다.

언급URL : https://stackoverflow.com/questions/53557457/nuxt-auth-module-does-not-set-loggedin-user-in-store-state

반응형