user.js 5.58 KB
import Cookie from 'js-cookie';

export const state = () => ({
  me: null,
});

export const mutations = {
  loadMe(state, payload) {
    const {user} = payload;
    state.me = user;
  },
  login(state, payload) {
    const {user} = payload;
    state.me = user;
  },
  logout(state) {
    state.me = null;
  }
};

export const actions = {
//mutation{commit} 호출
  loadMe({commit}, payload) {
    return new Promise(async (resolve, reject) => {
      try {
        const {cookie} = payload;
        this.$axios.defaults.headers.common['Authorization'] = `Token ${cookie}`;
        const res = await this.$axios.get('http://54.180.112.94:8080/api/auth/loadMe', {
          withCredentials: true
        });
        commit('loadMe', {user: res.data});
        return resolve();
      } catch (e) {
        console.error(e);
        return reject(e);
      }
    })
  },

  /* signUp */
  signUp({commit}, payload) {
    return new Promise(async (resolve, reject) => {
      try {
        const {email, username, password} = payload;
        const res = await this.$axios.post('http://54.180.112.94:8080/api/auth/signUp', {
          email, username, password
        }, {
          withCredentials: true
        });
        const {user, token} = res.data;
        if (process.browser) {
          localStorage.setItem('accessToken', token);
          Cookie.set('accessToken', token);
          console.log(localStorage);
        }

        commit('login', {user});
        return resolve();

      } catch (e) {
        console.log(res.data);
        console.error(e);
        return reject(e);
      }
    })
  },

  /* login */
  login({commit}, payload) {
    return new Promise(async (resolve, reject) => {
      try {
        console.log(payload)
        const {username, password} = payload;
        console.log('login 실행');
        const res = await this.$axios.post('http://54.180.112.94:8080/api/auth/login', {
          username,password
        }, {
          withCredentials: true
        });
        console.log(res);
        // # 접근 성공 시, 토큰 값이 반환된다.
        // 토큰을 헤더 정보에 포함시켜서 유저 정보를 요청
        // 토큰을 로컬 스토리지에 저장
        const {user, token} = res.data;
       // console.log(user, token);
        if (process.browser) {
          localStorage.setItem('accessToken', token);
          Cookie.set('accessToken', token);
          console.log(localStorage);
        }
/*
  login({commit}, payload) {
    return new Promise(async (resolve, reject) => {
      try {
        const {username, password} = payload;
        console.log('login 실행');
        const res = await this.$axios.post('ec2-54-180-112-94.ap-northeast-2.compute.amazonaws.com:8000/rest-a
uth/google', {
          username, password
        }, {
          withCredentials: true
        });

        console.log(res);
        // # 접근 성공 시, 토큰 값이 반환된다.
        // 토큰을 헤더 정보에 포함시켜서 유저 정보를 요청
        // 토큰을 로컬 스토리지에 저장
        const {user, token} = res.data;
        console.log(user, token);
        if (process.browser) {
          localStorage.setItem('accessToken', token);
          Cookie.set('accessToken', token);
          console.log(localStorage);
        }
*/


        commit('login', {user});
        return resolve();

      } catch (e) {
        console.error(e);
        return reject(e);
      }
    });
  },

  /* logout */
  logout({commit}) {
    return new Promise(async (resolve, reject) => {
      try {
        // await this.$axios.get('http://127.0.0.1:8000/user/logout', {
        //   withCredentials: true
        // });
        if (process.browser) {
          localStorage.removeItem('accessToken');
          Cookie.remove('accessToken');
        }
        commit('logout');
        return resolve();

      } catch (e) {
        console.error(e);
        return reject(e);
      }
    })
  },


  socialLogin({commit}){
        console.log('zz')
        console.log(this)
	return new Promise(async (resolve, reject) => {
		try{
		const res = await this.$axios.post('http://ec2-54-180-112-94.ap-northeast-2.compute.amazonaws.com:8080/accounts/google/login/callback/main/',{	withCredentials: true	});		
		console.log(res);

		}catch(e){
		console.error(e);
		return reject(e);	
	}
	})		
  }	


};


// mutations -> 함수 인자로 (state, payload) => state / payload -> actions
// actions -> 함수 인자로 ({commit}, payload) => commit mutations / payload

// new Promise -> 비동기, 동기

// 동기
// 동시에 처리된다는 말은 실행되고 결과가 무조건 동시에 나와야한다는 뜻이야
// print(1) print(2) print(3) => 1, 2, 3

// 비동기
// print(1) print(2, => 1초) print(3) => 1,3,2 (default)

// Promise 비동기식 작업을 처리한다
// 로그인 요청 => 서버로 로그인 데이터를 보내주세요 => 서버로부터 온 데이터를 mutation을 통해 state.me의 값을 수정해주세요
// 그 작업을 비동기적으로 실행되는 작업을 처리하겠다 => Promise ( 순차적으로 실행되게 하는거야 ) =>
// Username, password => user 정보가 오지 않았어 (성공, 실패) => user: null 인 상태에서 state.me 수정해버리는 거야 => user 정보가 오는거야
// 그래서 뭐를 하냐 new Promise => 내부에 로직같은걸로 무조건 기다려야 하는 작업에 기다리라는 속성을 줘! 서버에서 user 정보를 받아와야 하는 작업에 user정보가 올때까지 기다려 라는 로직같은 걸 줘!

// return new Promise( async(resolve, reject)=> {
//   try{
//
//   }catch (e) {
//
//   }
// })