vue+flask 시작 로그인 구현 2.

앞의 Login.vue를 다시 보자. 일단 폼의 데이터를 뷰로 가져와야하는데 방법이 많을것같은데 생각나는게 v-model로 데이터를 동기화해서 가져오는 방법이 있어서 이렇게 했다.(이게 뷰에 적합한(?) 방법인지는 모르겠음)

그리고 폼 -> 뷰로 가져온 데이터를 다시 ajax로 서버로 쏴줘야 한다. 책에 axios라는 vue ajax 가 있는데 구글링해가며 사용했다. 로그인은 uri /api/login로 구현하기로 마음먹었다.

<template>
  <div>
    쿠팡 Ldap id, pw를 입력하세요.
    <b-form inline>
      <label class="sr-only" for="inlineFormInputName2">Name</label>
      <b-input class="mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" v-model="credentials.username" placeholder="coupang ldap id" />
      <b-input class="mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" v-model="credentials.password" placeholder="coupang ldap pw" />
      <b-button variant="primary" v-on:click="login">Login</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      credentials: {
        username: '',
        password: ''
      },
      error_msg: ''
    }
  },
  methods: {
    login: function () {
      let LdapInfo = {
        ldap_id: this.credentials.username,
        ldap_pw: this.credentials.password
      }
      this.$axios.post(`/api/login`, LdapInfo).then((response) => {
        alert(response.data.code)
      })
    }
  }
}
</script>

<style scoped>

</style>

credentials라는걸 선언해주고 폼과 credentials를 v-model로 바뀔때마다 서로 알아채도록 설정하고 버튼 클릭에 v-on:click='login'으로 로그인 함수를 호출하도록 하였다.(지금보니까 @click해도 된다.) 

로그인 함수가 호출되면 바로 폼과 동기화되어있는 데이터들을 가져와서, ajax라이브러리인 axios로 /api/login페이지에 post로 쏴준다.

axios에서 post로 쏜 데이터를 받기 위해, /python_src/model/login_api.py를 만들었다. login_api.py는 post를 받아서 ldap으로 유효한 계정인지 처리하고, 유효하면 True를 반환할 예정이다.(원래는 쿠키나 세션 등도 세팅해줘야 하는데 일단은 한바퀴 잘 돌아가는거에 초점을 맞췄다.) 

# -*- coding: utf-8 -*-

from flask_restful import Resource
from ldap3 import Server, Connection

class LoginAPI(Resource):
    def login(self, ldap_info):
        return True

보안상 모든 로직을 지우고 그냥 return True만 남겨놓았다. ldap관련 내용은 구글링해보면 잘 나온다.

마지막으로 서버단 app.py에 /api/login으로 post요청이 올경우 어떻게 처리할지 적어놓았다.

# -*- coding: utf-8 -*-

from flask import Flask, jsonify, request
from python_src.model.login import LoginAPI
import os

class MyFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='{%',
    block_end_string='%}',
    variable_start_string='((',
    variable_end_string='))',
    comment_start_string='{#',
    comment_end_string='#}',
  ))

APP_ROOT = os.path.dirname(os.path.abspath(__file__))
APP_STATIC = os.path.join(APP_ROOT, 'dist')

# Flask app을 생성한다
app = MyFlask(__name__, static_folder=APP_STATIC, static_url_path='')

@app.route('/')
def index():
  return app.send_static_file('index.html')

@app.route('/api/login', methods=['POST'])
def rest_ful():
  login_api = LoginAPI()
  login_api.login(request.data)
  return jsonify({'code':'True!!!'})

if __name__ == '__main__':
  app.run(host='127.0.0.1', debug=True)

빌드는 run run dev가 아닌, 파이썬의 flask로 돌릴 것이므로, npm run build로 컴파일을 다시 해 주고,(매번 뷰쪽 변경사항이 있을때마다 컴파일을 다시 해 줘야 한다.) flask를 실행시켰다.

잘 된다!