반응형
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
반응형
'programing' 카테고리의 다른 글
어레이의 개체 업데이트가 VUE에서 작동하지 않는 이유는 무엇입니까? (0) | 2022.07.31 |
---|---|
어레이의 중간을 계산할 때 시작 + (종료 - 시작) / 2보다 2를 선호하는 이유는 무엇입니까? (0) | 2022.07.29 |
VueJ에서 원활하게 v-show 애니메이션 생성s (0) | 2022.07.29 |
8단계 관성의 모델을 통해 관계에 접근하는 방법 (0) | 2022.07.29 |
서버 측에서 vuex 또는 라우터 없이 단일 파일 컴포넌트를 렌더링 (0) | 2022.07.29 |