SpringBoot+Vueログイン(2)

ログイン機能(1)
前回の記事では、ログインしたサーバ側の設定とAPIを作成しました.

Login.vue

<template>
  <div class="wrapper">
    <div id="login">
      <div class="container">
        <div class="row justify-content-center align-items-center">
          <div class="col-sm-6">
            <div class="card">
              <h4 class="card-header">로그인</h4>
              <div class="card-body">
                <form data-toggle="validator" role="form" method="post" action="#">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label>Email</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i 
                                class="fa fa-user" 
                                aria-hidden="true"
                              />
                            </span>
                          </div>
                          <input 
                            type="text" 
                            class="form-control"
                            placeholder="아이디(이메일)를 입력해주세요."
                            v-model="id" 
                          />
                        </div>
                        <div class="help-block with-errors text-danger"></div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label>Password</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i 
                                class="fa fa-lock" 
                                aria-hidden="true"
                              />
                            </span>
                          </div>
                          <input 
                            type="password" 
                            v-model="password"
                            placeholder="비밀번호를 입력해주세요."
                            class="form-control"
                          />
                        </div>
                        <div class="help-block with-errors text-danger"></div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <button 
                        type="button"
                        class="btn btn-primary btn-lg btn-block"
                        @click="login()"
											>
                        Login
                      </button>
                    </div>
                  </div>
                </form>
                <div class="form-group">
                  <div class="clear"></div>
                  <br>
                  <i class="fa fa-user fa-fw" />처음 방문하십니까? 
                  <a href="/join">회원가입</a>
                  <br>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      id: "",
      password: ""
    }
  },
  methods: {
    login() {
      // 아이디와 패스워드 입력여부 확인
      if (this.id && this.password) {
        var id = this.id              // 아이디
        var password = this.password  // 비밀번호
        this.store.dispatch('login', {id, password}) // 로그인
      } else {
        alert("아이디 또는 비밀번호가 입력되지 않았습니다.")
        return false
      }
    }
  }
}
</script>
<style scoped>
  #login {
    margin-top: 150px;
  }
</style>

以上、ログイン画面を設定しました.
ただし、ログイン機能をテストする前に、手順を見てみましょう.

ID(Eメール)パスワードを入力し、ログインボタン

をクリックします.

クライアントは、ユーザが入力した情報をvuexのstore(Vuexはステータス管理モード+ライブラリ)を介してログインAPIに送信する.

API使用要求時に受信したデータは会員が存在するかどうかをチェックし、存在する場合はパスワードが一致しているかどうかをチェックする.

コースを通過すると、サーバは、ユーザ情報とともに認証値(トークン)をユーザに提供する.

クライアント

のユーザ情報および認証トークンに応答する.

クライアントは、トークンとユーザ情報が正常に応答した後、storeを介してクライアントにこれらのデータを格納し、所定のスクリーン移動を実行する.

上記の過程を守るために、いくつかのものが漏れています.vuexのstoreからサーバAPIへのログインを要求できる関数が必要です.また、利用可能なオブジェクトを個別に格納するために、応答データを格納する必要があります.また、vuexのstoreに格納されているデータは、ページのリフレッシュ時に消失するため、リフレッシュ時に習慣的に再ログインする必要がある.従って,vuex−persistedstateによりリフレッシュなどの問題を解決した.
vuex-persistedstateは、store値が変化したときにこれらの値をlocalstorageに保存し、必要に応じてlocalstorageで損失値を復元する機能を有するため、非常に有用である.

src/store/module.js

import axios from 'axios'
import { router } from '../router/index.js'

const state = {
  token: null,
  id: null,
  name: null,
  role: null,
  email: null,
  nickname: null
}

const getters = {
  'token': state => state.token,
  'id': state => state.id,
  'email': state => state.email,
  'nickname': state => state.nickname
}

const mutations = {
  login (state, item) {
      state.token = item.headers['accesstoken']
      state.id = item.data['id']
      state.role = item.data['role']
      state.email = item.data['email']
      state.nickname = item.data['nickname']
  },
  logout (state) {
      state.token = null
      state.id = null
      state.role = null
      state.email = null
      state.nickname = null
  }
}

const actions = {
  login ({commit}, {id, password}) {
      const params = {
          "email": id,
          "password": password
      }
      axios.post("http://localhost:8080/signin", JSON.stringify(params), {
        headers: { 'content-type': 'application/json' }
      }).then(res => {
        commit('login', res)
        router.push("/posts")
      }).catch(e => {
        console.log(e)
        alert("로그인 요청에 문제가 발생했습니다.")
      })

  },
  logout ({commit}) {
      commit('logout')
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

store/index.js

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate"
import modules from './modules.js'

const persistedState = createPersistedState({
    paths: ['token', 'id', 'name', 'role', 'nickname']
})

export const store = createStore({
    state:      modules.state,
    getters:    modules.getters,
    mutations:  modules.mutations,
    actions:    modules.actions,
    plugins:    [persistedState]
})

今から正式にログインしましょう

response body

これにより、応答オブジェクトのデータを表示できます.
実際、要求応答はモードであるため、トラフィックロジックを除いて、API通信方式はログインとあまり変わらない.
このように会員登録を作成している状態ですが、後で時間があれば文字で処理しましょう!
次のリンクで完全なコードを表示できます.
shinhyocheol/jpaPlatformAPI
shinhyocheol/vuePlatformView