itsource

vuex 알 수 없는 작업 유형: 로그인

mycopycode 2023. 6. 11. 10:38
반응형

vuex 알 수 없는 작업 유형: 로그인

Login.vue

<script setup>
import { useLayout } from '@/layout/composables/layout';
import { ref, computed } from 'vue';
import AppConfig from '@/layout/AppConfig.vue';
import { decodeCredential } from 'vue3-google-login'
import {auth} from '../../../store/modules/auth.module';
import { useStore } from "vuex";
const store = useStore()
const { layoutConfig, contextPath } = useLayout();
const email = ref('');
const password = ref('');
const checked = ref(false);

const logoUrl = computed(() => {
    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
});


const callback = (response) => {
  const userData = decodeCredential(response.credential);
//   const authStore = auth;
//   console.log(authStore.login());
  if (userData.email=='****@gmail.com') {
    return store.dispatch('login')
        }
}

</script>

auth.js.

import AuthService from "../../services/auth.service";  

const user = JSON.parse(localStorage.getItem('token'));
const initialState = user
  ? { status: { loggedIn: true }, user }
  : { status: { loggedIn: false }, user: null };

export const auth = {
  namespaced: true,
  state: initialState,
  actions: {
    login({ commit }, user) {
      return AuthService.login(user).then(
        user => {
          commit('loginSuccess', user);
          return Promise.resolve(user);
        },
        error => {
          commit('loginFailure');
          return Promise.reject(error);
        }
      );
    },
    logout({ commit }) {
      AuthService.logout();
      commit('logout');
    },
  
  },
  mutations: {
    loginSuccess(state, user) {
      state.status.loggedIn = true;
      state.user = user;
    },
    loginFailure(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    logout(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
  
  }
};

공인 서비스제이에스

import axios from 'axios';

const API_URL = 'http://localhostGetToken';

class AuthService {
  async login(user) {
    const response = await axios
      .post(API_URL, {
        username: user.username='admin',
        password: user.password='password'
      });
    if (response.data.accessToken) {
      localStorage.setItem('token', JSON.stringify(response.token));
    }
    console.log(response);
    return response.data;
  }

  async logout() {
    localStorage.removeItem('token');
  }


}

export default new AuthService();

여기서 이메일이 true이면 로그인을 시도하여 로그인 vuex.를 트리거하지만 [vuex] 알 수 없는 작업 유형: 로그인 어떻게 해결합니까?

당신은 당신의 질문에 어떻게 포함시키지 않았습니다.auth스토어가 응용 프로그램에 연결되어 있습니다.
당신은 본점이 있고, 그리고.authstore는 모듈 중 하나입니다.

내 추측이 맞다면, 당신은 파견되어야 합니다.auth/login,것은 아니다.login본점에 매장이 없기 때문에.login액션.


참고 사항:향후 질문의 질을 높이기 위해 질문 방법을 주의 깊게 읽어 보시기 바랍니다.

현재 질문의 문제:

  • 당신은 관련 없는 코드를 너무 많이 게시했고 동시에 모든 관련 코드를 게시하지 않았습니다.다음을 포함했어야 합니다.
    알 수 없는 것으로 간주되는 작업(해당 스토어의 다른 모든 항목은 이 질문과 무관함)
    스토어가 앱에 연결되는 방식(메인 스토어 + 스토어가 앱에서 인스턴스화되는 방식) - 이러한 비트가 누락되었습니다.
    구성 요소의 작업을 사용하는 방법(구성 요소의 다른 모든 항목은 질문과 무관)
  • 당신은 코드로 시작했습니다.항상 문제를 설명하는 것으로 시작해야 합니다. 그러면 사람들은 코드를 볼 때 무엇을 찾아야 하는지 알 수 있습니다(그리고 관련 없는 부분은 건너뜁니다).이는 유사한 문제가 있는 미래의 사용자에게도 유용합니다. 사용자는 질문이 자신의 문제와 관련이 있는지 여부를 빠르게 이해할 수 있습니다.
    사용자들이 더 많은 질문을 유용하게 생각할수록, 질문이 더 많이 투표될 가능성이 높습니다.

또 다른 참고 사항: 발송에 사용되는 조건이 잘못되었을 가능성이 높습니다.이메일이 실제로 있을 때만 사실입니다.'****@gmail.com'.
다음을 사용해야 합니다.if (userData.email.endsWith('@gmail.com')).

언급URL : https://stackoverflow.com/questions/74798031/vuex-unknown-action-type-login

반응형