20200513

스터디내용

• Store(vuex)의 payload 기능
• vue-router의 라우터가드를 통해서 로그인한 유저와 로그인을 안한 유저를 분별하여 다른 페이지와 다른 메뉴를 보이게 한다.
• router의 beforeEnter로 라우터가드를 연결하여서 페이지를 들어가기전에 Vuex의 상태를 확인하여 경로를 바꾸거나 그대로 진입시켜준다.

스터디 후기

• mutations의 loginSuccess에 payload를 넣어서 action의 로그인 시 DB에서 가져온 데이터를 mutation에 payload를 통해서 전달하고 그것을 state의 userInfo에 넣어서 데이터를 직접적으로 접근을 못하게 했다.

import Vue from "vue"
import Vuex from "vuex"
import router from "../router"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: null,
    allUser: [
      {
        id: 1,
        name: "hoza",
        email: "hotdari90@naver.com",
        password: "12345"
      },
      {
        id: 2,
        name: "hozad",
        email: "hotdari90@gmail.com",
        password: "12345"
      }
    ],
    isLogin: false,
    isLoginError: false
  },
  mutations: {
    // 로그인이 성공했을 때
    loginSuccess(state, payload) {
      state.isLogin = true
      state.isLoginError = false
      state.userInfo = payload
    },
    // 로그인이 실패했을 때
    loginError(state) {
      state.isLogin = false
      state.isLoginError = true
    }
  },
  actions: {
    // 로그인 시도
    login({ state, commit }, loginObj) {
      let selectedUser = null
      state.allUser.forEach(user => {
        if (user.email === loginObj.email) selectedUser = user
      })
      if (selectedUser === null || selectedUser.password !== loginObj.password)
        commit("loginError")
      else {
        commit("loginSuccess", selectedUser)
        router.push({ name: "mypage" })
      }
    }
  },
  modules: {}
})

• Vue-router의 라우터가드의 기능에 대해서 Vuex와 만나면 강력한 것을 느꼈다. 이것으로 관리자, 사용자, 매니저등의 등급에 따른 다른 경로와 메뉴를 손쉽게 라우터에서 제어가 가능하다.

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
import Login from "../views/Login.vue"
import Mypage from "../views/Mypage.vue"
import store from "../store"

Vue.use(VueRouter)

const rejectAuthUser = (to, from, next) => {
  if (store.state.isLogin === true) {
    //이미 로그인 된 유저
    alert("이미 로그인을 하였습니다.")
    next("/")
  } else {
    next()
  }
}

const onlyAuthUser = (to, from, next) => {
  if (store.state.isLogin === false) {
    //비로그인
    alert("로그인을 하여야 합니다.")
    next("/login")
  } else {
    next()
  }
}

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/login",
    name: "login",
    beforeEnter: rejectAuthUser,
    component: Login
  },
  {
    path: "/mypage",
    name: "mypage",
    beforeEnter: onlyAuthUser,
    component: Mypage
  }
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
})

export default router